프리젠테이션아키텍처 -...

91
과정명: 프리젠테이션 아키텍처 - AJAX Copyright © 2007 KOSTA, all rights reserved Korea Software Technology Association 중소기업직업훈련컨소시엄 프리젠테이션 아키텍처 -MVCAJAX - 훈련기간: 2008.10.27 ~ 11.5 강사명: 송태국, 이충헌, 손재현, 김동완

Upload: others

Post on 02-Jan-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

Korea

Software

Technology

Association

중소기업직업훈련컨소시엄

프리젠테이션 아키텍처-MVC와 AJAX -

훈련기간 20081027 ~ 115

강사명 송태국 이충헌 손재현 김동완

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄과정 개요

교육 목표

AJAX 기술에 대한 이해

AJAX 홗용역량 확보

다양한 플랫폼 프레임워크 상에서 AJAX 적용

교육 특징

이롞과 실습 두 개의 축으로 짂행

숙달 및 깊은 이해가 필요한 부분은 실습 수행

현장 경험이 풍부한 강사짂으로 구성

충분한 토의를 통한 지식 및 경험 공유

- 2 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄강의 요구 기술

본 강의는 아래 기술에 대한 이해를 필요로 합니다

HTML

JavaScript

Java

개발 도구

eclipse

아파치 톰캣 6

Spring

Struts 2

Extension JS

기타hellip

- 3 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄교육 일정표

교육은 매 회 4 시갂씩 총 6회에 걸쳐 진행 합니다

- 4 -

1 일차(이롞)

- MVC 이해

- Ajax 개요

- 프리젠테이션 아키텍처 패턴

2 일차(이론과 실습)

- Spring 이해

- Spring 홖경 준비

- Spring과 MVC 이해

- Spring과 MVC 실습

3 일차(이론과 실습)

- Spring과 AJAX 이해

- Spring과 AJAX 실습

- Struts 2 이해

- Struts 2와 MVC

- Struts 2와 AJAX

- Extension JS 이해

- Extension JS 와 AJAX I

- Extension JS 와 AJAX II

5 일차(이론과 실습) 6 일차(이론과 실습)4 일차(이론과 실습)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄1일차 ndash MVC와 AJAX 개요

11 웹 프리젠테이션 패턴

12 Ajax 개요

13 상용 제품을 통해 바라본 Ajax

- 5 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄11 웹 프리젠테이션 패턴

모델 뷰 컨트롤러

페이지 컨트롤러

프론트 컨트롤러

템플릿 뷰

변형(Transform) 뷰

두 단계 (Two Step) 뷰

애플리케이션 컨트롤러

- 6 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄모델 뷰 컨트롤러

작동원리

모델 (Model) - 도메인 정보를 표현하는 객체

뷰 (View) - 정보를 표현

컨트롟러(Controller) - 모든 정보의 변경을 처리

사용 시점

뷰와 모델의 분리는 가장 중요한 소프트웨어 설계원칙

웹 애플리케이션 설계시 뷰와 컨트롟러 분리

- 7 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄모델 뷰 컨트롤러 - 예

하나의 모델에 다양한 뷰가 있을 수 있음

- 8 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(19)

웹 사이트에서 특정 페이지나 액션의 요청을 처리하는 객체

작동원리

URL해독하고 액션을 위한 데이터를 추출

데이터 처리를 위해 모델 객체를 생성

결과페이지를 표시할 뷰를 결정하고 모델 정보를 보냄

사용 시점

컨트롟러의 로직이 간단한 사이트에서 사용

복잡한 경우는 헬퍼 클래스 사용

- 9 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(29)

예제 서블릿 컨트롤러와 JSP 뷰

서블릿 컨트롟러와 JSP 뷰가 잇는 간단한 화면

URL httpwwwthingycomrecordingAppartistname=danielaMercury

- 10 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(39)

예제 서블릿 컨트롤러와 JSP 뷰

ArtistController 클래스

- 11 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = Artistfind (requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

protected void forward(String target HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

RequestDispatcher dispatcher = getServletContext()getRequestDispatcher(target)

dispatcherforward(request response)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(15)

웹 사이트를 위한 모든 요청을 처리하는 컨트롤러

작동원리

단일 핸들러 객체를 통한 요청 채널화

웹 핸들러와 커맨드 계층 두 부분으로 구성

bull 웹 핸들러 실행할 커맨드 선택

bull 커맨드 액션을 수행 응답으로 사용할 뷰 선택

- 12 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(25)

사용시점

하나의 프롞트 컨트롟러를 사용하므로 웹 서버의 구성이 간단

실행 시간에 데코레이터 역할 수행

참고 자료

Alur Crupi and Malks Core J2EE Patterns Best Practices and Design Strategies Prentice Hall 2001

Struts

- 13 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(35)

예제 단순표시

URL httplocalhost8080isamusicname=barelyWorksampcommand=Artist

- 14 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(45)

예제 단순표시

FrontServlet 클래스 컨트롟러

- 15 -

pubic void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

FrontCommand command = getCommand(request)

commandinit(getServletContext() request response)

commandprocess()

private FrontCommand getCommand(HttpServletRequest request)

try

return (FrontCommand) getCommandClass(request)newInstance()

catch(Exception e)

throw new ApplicationException(e)

privat Class getCommandClass(HttpServletRequest request)

Class result

final String commandClassName =

frontController + (String) requestgetParameter(command) + Command

catch(ClassNotFoundException e)

result = UnKnownCommandclass

return result

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(55)

예제 단순표시

FrontCommand 클래스 커맨드의 공통행위 정의

ArtistCommand 클래스

- 16 -

protected ServletContext context

protected HttpServletRequest request

protected HttpServletResponse response

public void init(ServletContext context HttpServletRequest request HttpServletResponse response)

thiscontext = context

thisrequest = request

thisresponse = response

abstract public void process() throws ServletException IOException

protected void forward(String target) throws ServletException IOException

RequestDispatcher dispatcher = contextgetReqeustDispatcher(target)

dispatcherforward(request response)

public void process() throws ServletException IOException

Artist artist = ArtistfindNamed(requestgetParameter(name))

requestsetAttribute(helper new ArtistHelper(artist)

forward(artistjsp)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(13)

마커를 HTML페이지 사이에 넣어 정보를 HTML로 표현

작동원리

마커 끼워넣기

헬퍼 객체

조건부표시

반복

스크립트 사용

- 17 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(23)

사용 시점

프로그래머와 디자이너의 공동작업이 가능

복잡한 로직이 페이지에 작성됨

테스트가 용이하지 않음

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

ArtistController 클래스 컨트롟러

artistjsp

- 18 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = ArtistfindNamed(requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

ltjspuseBean id=ldquohelperrdquo type=ldquoactionControllerArtistHelperrdquo scope=ldquorequestrdquogt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 2: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄과정 개요

교육 목표

AJAX 기술에 대한 이해

AJAX 홗용역량 확보

다양한 플랫폼 프레임워크 상에서 AJAX 적용

교육 특징

이롞과 실습 두 개의 축으로 짂행

숙달 및 깊은 이해가 필요한 부분은 실습 수행

현장 경험이 풍부한 강사짂으로 구성

충분한 토의를 통한 지식 및 경험 공유

- 2 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄강의 요구 기술

본 강의는 아래 기술에 대한 이해를 필요로 합니다

HTML

JavaScript

Java

개발 도구

eclipse

아파치 톰캣 6

Spring

Struts 2

Extension JS

기타hellip

- 3 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄교육 일정표

교육은 매 회 4 시갂씩 총 6회에 걸쳐 진행 합니다

- 4 -

1 일차(이롞)

- MVC 이해

- Ajax 개요

- 프리젠테이션 아키텍처 패턴

2 일차(이론과 실습)

- Spring 이해

- Spring 홖경 준비

- Spring과 MVC 이해

- Spring과 MVC 실습

3 일차(이론과 실습)

- Spring과 AJAX 이해

- Spring과 AJAX 실습

- Struts 2 이해

- Struts 2와 MVC

- Struts 2와 AJAX

- Extension JS 이해

- Extension JS 와 AJAX I

- Extension JS 와 AJAX II

5 일차(이론과 실습) 6 일차(이론과 실습)4 일차(이론과 실습)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄1일차 ndash MVC와 AJAX 개요

11 웹 프리젠테이션 패턴

12 Ajax 개요

13 상용 제품을 통해 바라본 Ajax

- 5 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄11 웹 프리젠테이션 패턴

모델 뷰 컨트롤러

페이지 컨트롤러

프론트 컨트롤러

템플릿 뷰

변형(Transform) 뷰

두 단계 (Two Step) 뷰

애플리케이션 컨트롤러

- 6 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄모델 뷰 컨트롤러

작동원리

모델 (Model) - 도메인 정보를 표현하는 객체

뷰 (View) - 정보를 표현

컨트롟러(Controller) - 모든 정보의 변경을 처리

사용 시점

뷰와 모델의 분리는 가장 중요한 소프트웨어 설계원칙

웹 애플리케이션 설계시 뷰와 컨트롟러 분리

- 7 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄모델 뷰 컨트롤러 - 예

하나의 모델에 다양한 뷰가 있을 수 있음

- 8 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(19)

웹 사이트에서 특정 페이지나 액션의 요청을 처리하는 객체

작동원리

URL해독하고 액션을 위한 데이터를 추출

데이터 처리를 위해 모델 객체를 생성

결과페이지를 표시할 뷰를 결정하고 모델 정보를 보냄

사용 시점

컨트롟러의 로직이 간단한 사이트에서 사용

복잡한 경우는 헬퍼 클래스 사용

- 9 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(29)

예제 서블릿 컨트롤러와 JSP 뷰

서블릿 컨트롟러와 JSP 뷰가 잇는 간단한 화면

URL httpwwwthingycomrecordingAppartistname=danielaMercury

- 10 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(39)

예제 서블릿 컨트롤러와 JSP 뷰

ArtistController 클래스

- 11 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = Artistfind (requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

protected void forward(String target HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

RequestDispatcher dispatcher = getServletContext()getRequestDispatcher(target)

dispatcherforward(request response)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(15)

웹 사이트를 위한 모든 요청을 처리하는 컨트롤러

작동원리

단일 핸들러 객체를 통한 요청 채널화

웹 핸들러와 커맨드 계층 두 부분으로 구성

bull 웹 핸들러 실행할 커맨드 선택

bull 커맨드 액션을 수행 응답으로 사용할 뷰 선택

- 12 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(25)

사용시점

하나의 프롞트 컨트롟러를 사용하므로 웹 서버의 구성이 간단

실행 시간에 데코레이터 역할 수행

참고 자료

Alur Crupi and Malks Core J2EE Patterns Best Practices and Design Strategies Prentice Hall 2001

Struts

- 13 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(35)

예제 단순표시

URL httplocalhost8080isamusicname=barelyWorksampcommand=Artist

- 14 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(45)

예제 단순표시

FrontServlet 클래스 컨트롟러

- 15 -

pubic void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

FrontCommand command = getCommand(request)

commandinit(getServletContext() request response)

commandprocess()

private FrontCommand getCommand(HttpServletRequest request)

try

return (FrontCommand) getCommandClass(request)newInstance()

catch(Exception e)

throw new ApplicationException(e)

privat Class getCommandClass(HttpServletRequest request)

Class result

final String commandClassName =

frontController + (String) requestgetParameter(command) + Command

catch(ClassNotFoundException e)

result = UnKnownCommandclass

return result

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(55)

예제 단순표시

FrontCommand 클래스 커맨드의 공통행위 정의

ArtistCommand 클래스

- 16 -

protected ServletContext context

protected HttpServletRequest request

protected HttpServletResponse response

public void init(ServletContext context HttpServletRequest request HttpServletResponse response)

thiscontext = context

thisrequest = request

thisresponse = response

abstract public void process() throws ServletException IOException

protected void forward(String target) throws ServletException IOException

RequestDispatcher dispatcher = contextgetReqeustDispatcher(target)

dispatcherforward(request response)

public void process() throws ServletException IOException

Artist artist = ArtistfindNamed(requestgetParameter(name))

requestsetAttribute(helper new ArtistHelper(artist)

forward(artistjsp)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(13)

마커를 HTML페이지 사이에 넣어 정보를 HTML로 표현

작동원리

마커 끼워넣기

헬퍼 객체

조건부표시

반복

스크립트 사용

- 17 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(23)

사용 시점

프로그래머와 디자이너의 공동작업이 가능

복잡한 로직이 페이지에 작성됨

테스트가 용이하지 않음

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

ArtistController 클래스 컨트롟러

artistjsp

- 18 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = ArtistfindNamed(requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

ltjspuseBean id=ldquohelperrdquo type=ldquoactionControllerArtistHelperrdquo scope=ldquorequestrdquogt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 3: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄강의 요구 기술

본 강의는 아래 기술에 대한 이해를 필요로 합니다

HTML

JavaScript

Java

개발 도구

eclipse

아파치 톰캣 6

Spring

Struts 2

Extension JS

기타hellip

- 3 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄교육 일정표

교육은 매 회 4 시갂씩 총 6회에 걸쳐 진행 합니다

- 4 -

1 일차(이롞)

- MVC 이해

- Ajax 개요

- 프리젠테이션 아키텍처 패턴

2 일차(이론과 실습)

- Spring 이해

- Spring 홖경 준비

- Spring과 MVC 이해

- Spring과 MVC 실습

3 일차(이론과 실습)

- Spring과 AJAX 이해

- Spring과 AJAX 실습

- Struts 2 이해

- Struts 2와 MVC

- Struts 2와 AJAX

- Extension JS 이해

- Extension JS 와 AJAX I

- Extension JS 와 AJAX II

5 일차(이론과 실습) 6 일차(이론과 실습)4 일차(이론과 실습)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄1일차 ndash MVC와 AJAX 개요

11 웹 프리젠테이션 패턴

12 Ajax 개요

13 상용 제품을 통해 바라본 Ajax

- 5 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄11 웹 프리젠테이션 패턴

모델 뷰 컨트롤러

페이지 컨트롤러

프론트 컨트롤러

템플릿 뷰

변형(Transform) 뷰

두 단계 (Two Step) 뷰

애플리케이션 컨트롤러

- 6 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄모델 뷰 컨트롤러

작동원리

모델 (Model) - 도메인 정보를 표현하는 객체

뷰 (View) - 정보를 표현

컨트롟러(Controller) - 모든 정보의 변경을 처리

사용 시점

뷰와 모델의 분리는 가장 중요한 소프트웨어 설계원칙

웹 애플리케이션 설계시 뷰와 컨트롟러 분리

- 7 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄모델 뷰 컨트롤러 - 예

하나의 모델에 다양한 뷰가 있을 수 있음

- 8 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(19)

웹 사이트에서 특정 페이지나 액션의 요청을 처리하는 객체

작동원리

URL해독하고 액션을 위한 데이터를 추출

데이터 처리를 위해 모델 객체를 생성

결과페이지를 표시할 뷰를 결정하고 모델 정보를 보냄

사용 시점

컨트롟러의 로직이 간단한 사이트에서 사용

복잡한 경우는 헬퍼 클래스 사용

- 9 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(29)

예제 서블릿 컨트롤러와 JSP 뷰

서블릿 컨트롟러와 JSP 뷰가 잇는 간단한 화면

URL httpwwwthingycomrecordingAppartistname=danielaMercury

- 10 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(39)

예제 서블릿 컨트롤러와 JSP 뷰

ArtistController 클래스

- 11 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = Artistfind (requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

protected void forward(String target HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

RequestDispatcher dispatcher = getServletContext()getRequestDispatcher(target)

dispatcherforward(request response)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(15)

웹 사이트를 위한 모든 요청을 처리하는 컨트롤러

작동원리

단일 핸들러 객체를 통한 요청 채널화

웹 핸들러와 커맨드 계층 두 부분으로 구성

bull 웹 핸들러 실행할 커맨드 선택

bull 커맨드 액션을 수행 응답으로 사용할 뷰 선택

- 12 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(25)

사용시점

하나의 프롞트 컨트롟러를 사용하므로 웹 서버의 구성이 간단

실행 시간에 데코레이터 역할 수행

참고 자료

Alur Crupi and Malks Core J2EE Patterns Best Practices and Design Strategies Prentice Hall 2001

Struts

- 13 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(35)

예제 단순표시

URL httplocalhost8080isamusicname=barelyWorksampcommand=Artist

- 14 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(45)

예제 단순표시

FrontServlet 클래스 컨트롟러

- 15 -

pubic void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

FrontCommand command = getCommand(request)

commandinit(getServletContext() request response)

commandprocess()

private FrontCommand getCommand(HttpServletRequest request)

try

return (FrontCommand) getCommandClass(request)newInstance()

catch(Exception e)

throw new ApplicationException(e)

privat Class getCommandClass(HttpServletRequest request)

Class result

final String commandClassName =

frontController + (String) requestgetParameter(command) + Command

catch(ClassNotFoundException e)

result = UnKnownCommandclass

return result

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(55)

예제 단순표시

FrontCommand 클래스 커맨드의 공통행위 정의

ArtistCommand 클래스

- 16 -

protected ServletContext context

protected HttpServletRequest request

protected HttpServletResponse response

public void init(ServletContext context HttpServletRequest request HttpServletResponse response)

thiscontext = context

thisrequest = request

thisresponse = response

abstract public void process() throws ServletException IOException

protected void forward(String target) throws ServletException IOException

RequestDispatcher dispatcher = contextgetReqeustDispatcher(target)

dispatcherforward(request response)

public void process() throws ServletException IOException

Artist artist = ArtistfindNamed(requestgetParameter(name))

requestsetAttribute(helper new ArtistHelper(artist)

forward(artistjsp)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(13)

마커를 HTML페이지 사이에 넣어 정보를 HTML로 표현

작동원리

마커 끼워넣기

헬퍼 객체

조건부표시

반복

스크립트 사용

- 17 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(23)

사용 시점

프로그래머와 디자이너의 공동작업이 가능

복잡한 로직이 페이지에 작성됨

테스트가 용이하지 않음

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

ArtistController 클래스 컨트롟러

artistjsp

- 18 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = ArtistfindNamed(requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

ltjspuseBean id=ldquohelperrdquo type=ldquoactionControllerArtistHelperrdquo scope=ldquorequestrdquogt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 4: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄교육 일정표

교육은 매 회 4 시갂씩 총 6회에 걸쳐 진행 합니다

- 4 -

1 일차(이롞)

- MVC 이해

- Ajax 개요

- 프리젠테이션 아키텍처 패턴

2 일차(이론과 실습)

- Spring 이해

- Spring 홖경 준비

- Spring과 MVC 이해

- Spring과 MVC 실습

3 일차(이론과 실습)

- Spring과 AJAX 이해

- Spring과 AJAX 실습

- Struts 2 이해

- Struts 2와 MVC

- Struts 2와 AJAX

- Extension JS 이해

- Extension JS 와 AJAX I

- Extension JS 와 AJAX II

5 일차(이론과 실습) 6 일차(이론과 실습)4 일차(이론과 실습)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄1일차 ndash MVC와 AJAX 개요

11 웹 프리젠테이션 패턴

12 Ajax 개요

13 상용 제품을 통해 바라본 Ajax

- 5 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄11 웹 프리젠테이션 패턴

모델 뷰 컨트롤러

페이지 컨트롤러

프론트 컨트롤러

템플릿 뷰

변형(Transform) 뷰

두 단계 (Two Step) 뷰

애플리케이션 컨트롤러

- 6 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄모델 뷰 컨트롤러

작동원리

모델 (Model) - 도메인 정보를 표현하는 객체

뷰 (View) - 정보를 표현

컨트롟러(Controller) - 모든 정보의 변경을 처리

사용 시점

뷰와 모델의 분리는 가장 중요한 소프트웨어 설계원칙

웹 애플리케이션 설계시 뷰와 컨트롟러 분리

- 7 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄모델 뷰 컨트롤러 - 예

하나의 모델에 다양한 뷰가 있을 수 있음

- 8 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(19)

웹 사이트에서 특정 페이지나 액션의 요청을 처리하는 객체

작동원리

URL해독하고 액션을 위한 데이터를 추출

데이터 처리를 위해 모델 객체를 생성

결과페이지를 표시할 뷰를 결정하고 모델 정보를 보냄

사용 시점

컨트롟러의 로직이 간단한 사이트에서 사용

복잡한 경우는 헬퍼 클래스 사용

- 9 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(29)

예제 서블릿 컨트롤러와 JSP 뷰

서블릿 컨트롟러와 JSP 뷰가 잇는 간단한 화면

URL httpwwwthingycomrecordingAppartistname=danielaMercury

- 10 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(39)

예제 서블릿 컨트롤러와 JSP 뷰

ArtistController 클래스

- 11 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = Artistfind (requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

protected void forward(String target HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

RequestDispatcher dispatcher = getServletContext()getRequestDispatcher(target)

dispatcherforward(request response)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(15)

웹 사이트를 위한 모든 요청을 처리하는 컨트롤러

작동원리

단일 핸들러 객체를 통한 요청 채널화

웹 핸들러와 커맨드 계층 두 부분으로 구성

bull 웹 핸들러 실행할 커맨드 선택

bull 커맨드 액션을 수행 응답으로 사용할 뷰 선택

- 12 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(25)

사용시점

하나의 프롞트 컨트롟러를 사용하므로 웹 서버의 구성이 간단

실행 시간에 데코레이터 역할 수행

참고 자료

Alur Crupi and Malks Core J2EE Patterns Best Practices and Design Strategies Prentice Hall 2001

Struts

- 13 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(35)

예제 단순표시

URL httplocalhost8080isamusicname=barelyWorksampcommand=Artist

- 14 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(45)

예제 단순표시

FrontServlet 클래스 컨트롟러

- 15 -

pubic void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

FrontCommand command = getCommand(request)

commandinit(getServletContext() request response)

commandprocess()

private FrontCommand getCommand(HttpServletRequest request)

try

return (FrontCommand) getCommandClass(request)newInstance()

catch(Exception e)

throw new ApplicationException(e)

privat Class getCommandClass(HttpServletRequest request)

Class result

final String commandClassName =

frontController + (String) requestgetParameter(command) + Command

catch(ClassNotFoundException e)

result = UnKnownCommandclass

return result

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(55)

예제 단순표시

FrontCommand 클래스 커맨드의 공통행위 정의

ArtistCommand 클래스

- 16 -

protected ServletContext context

protected HttpServletRequest request

protected HttpServletResponse response

public void init(ServletContext context HttpServletRequest request HttpServletResponse response)

thiscontext = context

thisrequest = request

thisresponse = response

abstract public void process() throws ServletException IOException

protected void forward(String target) throws ServletException IOException

RequestDispatcher dispatcher = contextgetReqeustDispatcher(target)

dispatcherforward(request response)

public void process() throws ServletException IOException

Artist artist = ArtistfindNamed(requestgetParameter(name))

requestsetAttribute(helper new ArtistHelper(artist)

forward(artistjsp)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(13)

마커를 HTML페이지 사이에 넣어 정보를 HTML로 표현

작동원리

마커 끼워넣기

헬퍼 객체

조건부표시

반복

스크립트 사용

- 17 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(23)

사용 시점

프로그래머와 디자이너의 공동작업이 가능

복잡한 로직이 페이지에 작성됨

테스트가 용이하지 않음

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

ArtistController 클래스 컨트롟러

artistjsp

- 18 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = ArtistfindNamed(requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

ltjspuseBean id=ldquohelperrdquo type=ldquoactionControllerArtistHelperrdquo scope=ldquorequestrdquogt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 5: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄1일차 ndash MVC와 AJAX 개요

11 웹 프리젠테이션 패턴

12 Ajax 개요

13 상용 제품을 통해 바라본 Ajax

- 5 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄11 웹 프리젠테이션 패턴

모델 뷰 컨트롤러

페이지 컨트롤러

프론트 컨트롤러

템플릿 뷰

변형(Transform) 뷰

두 단계 (Two Step) 뷰

애플리케이션 컨트롤러

- 6 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄모델 뷰 컨트롤러

작동원리

모델 (Model) - 도메인 정보를 표현하는 객체

뷰 (View) - 정보를 표현

컨트롟러(Controller) - 모든 정보의 변경을 처리

사용 시점

뷰와 모델의 분리는 가장 중요한 소프트웨어 설계원칙

웹 애플리케이션 설계시 뷰와 컨트롟러 분리

- 7 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄모델 뷰 컨트롤러 - 예

하나의 모델에 다양한 뷰가 있을 수 있음

- 8 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(19)

웹 사이트에서 특정 페이지나 액션의 요청을 처리하는 객체

작동원리

URL해독하고 액션을 위한 데이터를 추출

데이터 처리를 위해 모델 객체를 생성

결과페이지를 표시할 뷰를 결정하고 모델 정보를 보냄

사용 시점

컨트롟러의 로직이 간단한 사이트에서 사용

복잡한 경우는 헬퍼 클래스 사용

- 9 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(29)

예제 서블릿 컨트롤러와 JSP 뷰

서블릿 컨트롟러와 JSP 뷰가 잇는 간단한 화면

URL httpwwwthingycomrecordingAppartistname=danielaMercury

- 10 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(39)

예제 서블릿 컨트롤러와 JSP 뷰

ArtistController 클래스

- 11 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = Artistfind (requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

protected void forward(String target HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

RequestDispatcher dispatcher = getServletContext()getRequestDispatcher(target)

dispatcherforward(request response)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(15)

웹 사이트를 위한 모든 요청을 처리하는 컨트롤러

작동원리

단일 핸들러 객체를 통한 요청 채널화

웹 핸들러와 커맨드 계층 두 부분으로 구성

bull 웹 핸들러 실행할 커맨드 선택

bull 커맨드 액션을 수행 응답으로 사용할 뷰 선택

- 12 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(25)

사용시점

하나의 프롞트 컨트롟러를 사용하므로 웹 서버의 구성이 간단

실행 시간에 데코레이터 역할 수행

참고 자료

Alur Crupi and Malks Core J2EE Patterns Best Practices and Design Strategies Prentice Hall 2001

Struts

- 13 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(35)

예제 단순표시

URL httplocalhost8080isamusicname=barelyWorksampcommand=Artist

- 14 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(45)

예제 단순표시

FrontServlet 클래스 컨트롟러

- 15 -

pubic void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

FrontCommand command = getCommand(request)

commandinit(getServletContext() request response)

commandprocess()

private FrontCommand getCommand(HttpServletRequest request)

try

return (FrontCommand) getCommandClass(request)newInstance()

catch(Exception e)

throw new ApplicationException(e)

privat Class getCommandClass(HttpServletRequest request)

Class result

final String commandClassName =

frontController + (String) requestgetParameter(command) + Command

catch(ClassNotFoundException e)

result = UnKnownCommandclass

return result

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(55)

예제 단순표시

FrontCommand 클래스 커맨드의 공통행위 정의

ArtistCommand 클래스

- 16 -

protected ServletContext context

protected HttpServletRequest request

protected HttpServletResponse response

public void init(ServletContext context HttpServletRequest request HttpServletResponse response)

thiscontext = context

thisrequest = request

thisresponse = response

abstract public void process() throws ServletException IOException

protected void forward(String target) throws ServletException IOException

RequestDispatcher dispatcher = contextgetReqeustDispatcher(target)

dispatcherforward(request response)

public void process() throws ServletException IOException

Artist artist = ArtistfindNamed(requestgetParameter(name))

requestsetAttribute(helper new ArtistHelper(artist)

forward(artistjsp)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(13)

마커를 HTML페이지 사이에 넣어 정보를 HTML로 표현

작동원리

마커 끼워넣기

헬퍼 객체

조건부표시

반복

스크립트 사용

- 17 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(23)

사용 시점

프로그래머와 디자이너의 공동작업이 가능

복잡한 로직이 페이지에 작성됨

테스트가 용이하지 않음

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

ArtistController 클래스 컨트롟러

artistjsp

- 18 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = ArtistfindNamed(requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

ltjspuseBean id=ldquohelperrdquo type=ldquoactionControllerArtistHelperrdquo scope=ldquorequestrdquogt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 6: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄11 웹 프리젠테이션 패턴

모델 뷰 컨트롤러

페이지 컨트롤러

프론트 컨트롤러

템플릿 뷰

변형(Transform) 뷰

두 단계 (Two Step) 뷰

애플리케이션 컨트롤러

- 6 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄모델 뷰 컨트롤러

작동원리

모델 (Model) - 도메인 정보를 표현하는 객체

뷰 (View) - 정보를 표현

컨트롟러(Controller) - 모든 정보의 변경을 처리

사용 시점

뷰와 모델의 분리는 가장 중요한 소프트웨어 설계원칙

웹 애플리케이션 설계시 뷰와 컨트롟러 분리

- 7 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄모델 뷰 컨트롤러 - 예

하나의 모델에 다양한 뷰가 있을 수 있음

- 8 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(19)

웹 사이트에서 특정 페이지나 액션의 요청을 처리하는 객체

작동원리

URL해독하고 액션을 위한 데이터를 추출

데이터 처리를 위해 모델 객체를 생성

결과페이지를 표시할 뷰를 결정하고 모델 정보를 보냄

사용 시점

컨트롟러의 로직이 간단한 사이트에서 사용

복잡한 경우는 헬퍼 클래스 사용

- 9 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(29)

예제 서블릿 컨트롤러와 JSP 뷰

서블릿 컨트롟러와 JSP 뷰가 잇는 간단한 화면

URL httpwwwthingycomrecordingAppartistname=danielaMercury

- 10 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(39)

예제 서블릿 컨트롤러와 JSP 뷰

ArtistController 클래스

- 11 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = Artistfind (requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

protected void forward(String target HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

RequestDispatcher dispatcher = getServletContext()getRequestDispatcher(target)

dispatcherforward(request response)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(15)

웹 사이트를 위한 모든 요청을 처리하는 컨트롤러

작동원리

단일 핸들러 객체를 통한 요청 채널화

웹 핸들러와 커맨드 계층 두 부분으로 구성

bull 웹 핸들러 실행할 커맨드 선택

bull 커맨드 액션을 수행 응답으로 사용할 뷰 선택

- 12 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(25)

사용시점

하나의 프롞트 컨트롟러를 사용하므로 웹 서버의 구성이 간단

실행 시간에 데코레이터 역할 수행

참고 자료

Alur Crupi and Malks Core J2EE Patterns Best Practices and Design Strategies Prentice Hall 2001

Struts

- 13 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(35)

예제 단순표시

URL httplocalhost8080isamusicname=barelyWorksampcommand=Artist

- 14 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(45)

예제 단순표시

FrontServlet 클래스 컨트롟러

- 15 -

pubic void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

FrontCommand command = getCommand(request)

commandinit(getServletContext() request response)

commandprocess()

private FrontCommand getCommand(HttpServletRequest request)

try

return (FrontCommand) getCommandClass(request)newInstance()

catch(Exception e)

throw new ApplicationException(e)

privat Class getCommandClass(HttpServletRequest request)

Class result

final String commandClassName =

frontController + (String) requestgetParameter(command) + Command

catch(ClassNotFoundException e)

result = UnKnownCommandclass

return result

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(55)

예제 단순표시

FrontCommand 클래스 커맨드의 공통행위 정의

ArtistCommand 클래스

- 16 -

protected ServletContext context

protected HttpServletRequest request

protected HttpServletResponse response

public void init(ServletContext context HttpServletRequest request HttpServletResponse response)

thiscontext = context

thisrequest = request

thisresponse = response

abstract public void process() throws ServletException IOException

protected void forward(String target) throws ServletException IOException

RequestDispatcher dispatcher = contextgetReqeustDispatcher(target)

dispatcherforward(request response)

public void process() throws ServletException IOException

Artist artist = ArtistfindNamed(requestgetParameter(name))

requestsetAttribute(helper new ArtistHelper(artist)

forward(artistjsp)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(13)

마커를 HTML페이지 사이에 넣어 정보를 HTML로 표현

작동원리

마커 끼워넣기

헬퍼 객체

조건부표시

반복

스크립트 사용

- 17 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(23)

사용 시점

프로그래머와 디자이너의 공동작업이 가능

복잡한 로직이 페이지에 작성됨

테스트가 용이하지 않음

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

ArtistController 클래스 컨트롟러

artistjsp

- 18 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = ArtistfindNamed(requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

ltjspuseBean id=ldquohelperrdquo type=ldquoactionControllerArtistHelperrdquo scope=ldquorequestrdquogt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 7: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄모델 뷰 컨트롤러

작동원리

모델 (Model) - 도메인 정보를 표현하는 객체

뷰 (View) - 정보를 표현

컨트롟러(Controller) - 모든 정보의 변경을 처리

사용 시점

뷰와 모델의 분리는 가장 중요한 소프트웨어 설계원칙

웹 애플리케이션 설계시 뷰와 컨트롟러 분리

- 7 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄모델 뷰 컨트롤러 - 예

하나의 모델에 다양한 뷰가 있을 수 있음

- 8 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(19)

웹 사이트에서 특정 페이지나 액션의 요청을 처리하는 객체

작동원리

URL해독하고 액션을 위한 데이터를 추출

데이터 처리를 위해 모델 객체를 생성

결과페이지를 표시할 뷰를 결정하고 모델 정보를 보냄

사용 시점

컨트롟러의 로직이 간단한 사이트에서 사용

복잡한 경우는 헬퍼 클래스 사용

- 9 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(29)

예제 서블릿 컨트롤러와 JSP 뷰

서블릿 컨트롟러와 JSP 뷰가 잇는 간단한 화면

URL httpwwwthingycomrecordingAppartistname=danielaMercury

- 10 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(39)

예제 서블릿 컨트롤러와 JSP 뷰

ArtistController 클래스

- 11 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = Artistfind (requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

protected void forward(String target HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

RequestDispatcher dispatcher = getServletContext()getRequestDispatcher(target)

dispatcherforward(request response)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(15)

웹 사이트를 위한 모든 요청을 처리하는 컨트롤러

작동원리

단일 핸들러 객체를 통한 요청 채널화

웹 핸들러와 커맨드 계층 두 부분으로 구성

bull 웹 핸들러 실행할 커맨드 선택

bull 커맨드 액션을 수행 응답으로 사용할 뷰 선택

- 12 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(25)

사용시점

하나의 프롞트 컨트롟러를 사용하므로 웹 서버의 구성이 간단

실행 시간에 데코레이터 역할 수행

참고 자료

Alur Crupi and Malks Core J2EE Patterns Best Practices and Design Strategies Prentice Hall 2001

Struts

- 13 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(35)

예제 단순표시

URL httplocalhost8080isamusicname=barelyWorksampcommand=Artist

- 14 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(45)

예제 단순표시

FrontServlet 클래스 컨트롟러

- 15 -

pubic void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

FrontCommand command = getCommand(request)

commandinit(getServletContext() request response)

commandprocess()

private FrontCommand getCommand(HttpServletRequest request)

try

return (FrontCommand) getCommandClass(request)newInstance()

catch(Exception e)

throw new ApplicationException(e)

privat Class getCommandClass(HttpServletRequest request)

Class result

final String commandClassName =

frontController + (String) requestgetParameter(command) + Command

catch(ClassNotFoundException e)

result = UnKnownCommandclass

return result

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(55)

예제 단순표시

FrontCommand 클래스 커맨드의 공통행위 정의

ArtistCommand 클래스

- 16 -

protected ServletContext context

protected HttpServletRequest request

protected HttpServletResponse response

public void init(ServletContext context HttpServletRequest request HttpServletResponse response)

thiscontext = context

thisrequest = request

thisresponse = response

abstract public void process() throws ServletException IOException

protected void forward(String target) throws ServletException IOException

RequestDispatcher dispatcher = contextgetReqeustDispatcher(target)

dispatcherforward(request response)

public void process() throws ServletException IOException

Artist artist = ArtistfindNamed(requestgetParameter(name))

requestsetAttribute(helper new ArtistHelper(artist)

forward(artistjsp)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(13)

마커를 HTML페이지 사이에 넣어 정보를 HTML로 표현

작동원리

마커 끼워넣기

헬퍼 객체

조건부표시

반복

스크립트 사용

- 17 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(23)

사용 시점

프로그래머와 디자이너의 공동작업이 가능

복잡한 로직이 페이지에 작성됨

테스트가 용이하지 않음

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

ArtistController 클래스 컨트롟러

artistjsp

- 18 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = ArtistfindNamed(requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

ltjspuseBean id=ldquohelperrdquo type=ldquoactionControllerArtistHelperrdquo scope=ldquorequestrdquogt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 8: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄모델 뷰 컨트롤러 - 예

하나의 모델에 다양한 뷰가 있을 수 있음

- 8 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(19)

웹 사이트에서 특정 페이지나 액션의 요청을 처리하는 객체

작동원리

URL해독하고 액션을 위한 데이터를 추출

데이터 처리를 위해 모델 객체를 생성

결과페이지를 표시할 뷰를 결정하고 모델 정보를 보냄

사용 시점

컨트롟러의 로직이 간단한 사이트에서 사용

복잡한 경우는 헬퍼 클래스 사용

- 9 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(29)

예제 서블릿 컨트롤러와 JSP 뷰

서블릿 컨트롟러와 JSP 뷰가 잇는 간단한 화면

URL httpwwwthingycomrecordingAppartistname=danielaMercury

- 10 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(39)

예제 서블릿 컨트롤러와 JSP 뷰

ArtistController 클래스

- 11 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = Artistfind (requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

protected void forward(String target HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

RequestDispatcher dispatcher = getServletContext()getRequestDispatcher(target)

dispatcherforward(request response)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(15)

웹 사이트를 위한 모든 요청을 처리하는 컨트롤러

작동원리

단일 핸들러 객체를 통한 요청 채널화

웹 핸들러와 커맨드 계층 두 부분으로 구성

bull 웹 핸들러 실행할 커맨드 선택

bull 커맨드 액션을 수행 응답으로 사용할 뷰 선택

- 12 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(25)

사용시점

하나의 프롞트 컨트롟러를 사용하므로 웹 서버의 구성이 간단

실행 시간에 데코레이터 역할 수행

참고 자료

Alur Crupi and Malks Core J2EE Patterns Best Practices and Design Strategies Prentice Hall 2001

Struts

- 13 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(35)

예제 단순표시

URL httplocalhost8080isamusicname=barelyWorksampcommand=Artist

- 14 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(45)

예제 단순표시

FrontServlet 클래스 컨트롟러

- 15 -

pubic void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

FrontCommand command = getCommand(request)

commandinit(getServletContext() request response)

commandprocess()

private FrontCommand getCommand(HttpServletRequest request)

try

return (FrontCommand) getCommandClass(request)newInstance()

catch(Exception e)

throw new ApplicationException(e)

privat Class getCommandClass(HttpServletRequest request)

Class result

final String commandClassName =

frontController + (String) requestgetParameter(command) + Command

catch(ClassNotFoundException e)

result = UnKnownCommandclass

return result

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(55)

예제 단순표시

FrontCommand 클래스 커맨드의 공통행위 정의

ArtistCommand 클래스

- 16 -

protected ServletContext context

protected HttpServletRequest request

protected HttpServletResponse response

public void init(ServletContext context HttpServletRequest request HttpServletResponse response)

thiscontext = context

thisrequest = request

thisresponse = response

abstract public void process() throws ServletException IOException

protected void forward(String target) throws ServletException IOException

RequestDispatcher dispatcher = contextgetReqeustDispatcher(target)

dispatcherforward(request response)

public void process() throws ServletException IOException

Artist artist = ArtistfindNamed(requestgetParameter(name))

requestsetAttribute(helper new ArtistHelper(artist)

forward(artistjsp)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(13)

마커를 HTML페이지 사이에 넣어 정보를 HTML로 표현

작동원리

마커 끼워넣기

헬퍼 객체

조건부표시

반복

스크립트 사용

- 17 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(23)

사용 시점

프로그래머와 디자이너의 공동작업이 가능

복잡한 로직이 페이지에 작성됨

테스트가 용이하지 않음

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

ArtistController 클래스 컨트롟러

artistjsp

- 18 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = ArtistfindNamed(requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

ltjspuseBean id=ldquohelperrdquo type=ldquoactionControllerArtistHelperrdquo scope=ldquorequestrdquogt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 9: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(19)

웹 사이트에서 특정 페이지나 액션의 요청을 처리하는 객체

작동원리

URL해독하고 액션을 위한 데이터를 추출

데이터 처리를 위해 모델 객체를 생성

결과페이지를 표시할 뷰를 결정하고 모델 정보를 보냄

사용 시점

컨트롟러의 로직이 간단한 사이트에서 사용

복잡한 경우는 헬퍼 클래스 사용

- 9 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(29)

예제 서블릿 컨트롤러와 JSP 뷰

서블릿 컨트롟러와 JSP 뷰가 잇는 간단한 화면

URL httpwwwthingycomrecordingAppartistname=danielaMercury

- 10 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(39)

예제 서블릿 컨트롤러와 JSP 뷰

ArtistController 클래스

- 11 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = Artistfind (requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

protected void forward(String target HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

RequestDispatcher dispatcher = getServletContext()getRequestDispatcher(target)

dispatcherforward(request response)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(15)

웹 사이트를 위한 모든 요청을 처리하는 컨트롤러

작동원리

단일 핸들러 객체를 통한 요청 채널화

웹 핸들러와 커맨드 계층 두 부분으로 구성

bull 웹 핸들러 실행할 커맨드 선택

bull 커맨드 액션을 수행 응답으로 사용할 뷰 선택

- 12 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(25)

사용시점

하나의 프롞트 컨트롟러를 사용하므로 웹 서버의 구성이 간단

실행 시간에 데코레이터 역할 수행

참고 자료

Alur Crupi and Malks Core J2EE Patterns Best Practices and Design Strategies Prentice Hall 2001

Struts

- 13 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(35)

예제 단순표시

URL httplocalhost8080isamusicname=barelyWorksampcommand=Artist

- 14 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(45)

예제 단순표시

FrontServlet 클래스 컨트롟러

- 15 -

pubic void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

FrontCommand command = getCommand(request)

commandinit(getServletContext() request response)

commandprocess()

private FrontCommand getCommand(HttpServletRequest request)

try

return (FrontCommand) getCommandClass(request)newInstance()

catch(Exception e)

throw new ApplicationException(e)

privat Class getCommandClass(HttpServletRequest request)

Class result

final String commandClassName =

frontController + (String) requestgetParameter(command) + Command

catch(ClassNotFoundException e)

result = UnKnownCommandclass

return result

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(55)

예제 단순표시

FrontCommand 클래스 커맨드의 공통행위 정의

ArtistCommand 클래스

- 16 -

protected ServletContext context

protected HttpServletRequest request

protected HttpServletResponse response

public void init(ServletContext context HttpServletRequest request HttpServletResponse response)

thiscontext = context

thisrequest = request

thisresponse = response

abstract public void process() throws ServletException IOException

protected void forward(String target) throws ServletException IOException

RequestDispatcher dispatcher = contextgetReqeustDispatcher(target)

dispatcherforward(request response)

public void process() throws ServletException IOException

Artist artist = ArtistfindNamed(requestgetParameter(name))

requestsetAttribute(helper new ArtistHelper(artist)

forward(artistjsp)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(13)

마커를 HTML페이지 사이에 넣어 정보를 HTML로 표현

작동원리

마커 끼워넣기

헬퍼 객체

조건부표시

반복

스크립트 사용

- 17 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(23)

사용 시점

프로그래머와 디자이너의 공동작업이 가능

복잡한 로직이 페이지에 작성됨

테스트가 용이하지 않음

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

ArtistController 클래스 컨트롟러

artistjsp

- 18 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = ArtistfindNamed(requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

ltjspuseBean id=ldquohelperrdquo type=ldquoactionControllerArtistHelperrdquo scope=ldquorequestrdquogt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 10: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(29)

예제 서블릿 컨트롤러와 JSP 뷰

서블릿 컨트롟러와 JSP 뷰가 잇는 간단한 화면

URL httpwwwthingycomrecordingAppartistname=danielaMercury

- 10 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(39)

예제 서블릿 컨트롤러와 JSP 뷰

ArtistController 클래스

- 11 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = Artistfind (requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

protected void forward(String target HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

RequestDispatcher dispatcher = getServletContext()getRequestDispatcher(target)

dispatcherforward(request response)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(15)

웹 사이트를 위한 모든 요청을 처리하는 컨트롤러

작동원리

단일 핸들러 객체를 통한 요청 채널화

웹 핸들러와 커맨드 계층 두 부분으로 구성

bull 웹 핸들러 실행할 커맨드 선택

bull 커맨드 액션을 수행 응답으로 사용할 뷰 선택

- 12 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(25)

사용시점

하나의 프롞트 컨트롟러를 사용하므로 웹 서버의 구성이 간단

실행 시간에 데코레이터 역할 수행

참고 자료

Alur Crupi and Malks Core J2EE Patterns Best Practices and Design Strategies Prentice Hall 2001

Struts

- 13 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(35)

예제 단순표시

URL httplocalhost8080isamusicname=barelyWorksampcommand=Artist

- 14 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(45)

예제 단순표시

FrontServlet 클래스 컨트롟러

- 15 -

pubic void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

FrontCommand command = getCommand(request)

commandinit(getServletContext() request response)

commandprocess()

private FrontCommand getCommand(HttpServletRequest request)

try

return (FrontCommand) getCommandClass(request)newInstance()

catch(Exception e)

throw new ApplicationException(e)

privat Class getCommandClass(HttpServletRequest request)

Class result

final String commandClassName =

frontController + (String) requestgetParameter(command) + Command

catch(ClassNotFoundException e)

result = UnKnownCommandclass

return result

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(55)

예제 단순표시

FrontCommand 클래스 커맨드의 공통행위 정의

ArtistCommand 클래스

- 16 -

protected ServletContext context

protected HttpServletRequest request

protected HttpServletResponse response

public void init(ServletContext context HttpServletRequest request HttpServletResponse response)

thiscontext = context

thisrequest = request

thisresponse = response

abstract public void process() throws ServletException IOException

protected void forward(String target) throws ServletException IOException

RequestDispatcher dispatcher = contextgetReqeustDispatcher(target)

dispatcherforward(request response)

public void process() throws ServletException IOException

Artist artist = ArtistfindNamed(requestgetParameter(name))

requestsetAttribute(helper new ArtistHelper(artist)

forward(artistjsp)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(13)

마커를 HTML페이지 사이에 넣어 정보를 HTML로 표현

작동원리

마커 끼워넣기

헬퍼 객체

조건부표시

반복

스크립트 사용

- 17 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(23)

사용 시점

프로그래머와 디자이너의 공동작업이 가능

복잡한 로직이 페이지에 작성됨

테스트가 용이하지 않음

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

ArtistController 클래스 컨트롟러

artistjsp

- 18 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = ArtistfindNamed(requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

ltjspuseBean id=ldquohelperrdquo type=ldquoactionControllerArtistHelperrdquo scope=ldquorequestrdquogt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 11: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄페이지 컨트롤러(39)

예제 서블릿 컨트롤러와 JSP 뷰

ArtistController 클래스

- 11 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = Artistfind (requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

protected void forward(String target HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

RequestDispatcher dispatcher = getServletContext()getRequestDispatcher(target)

dispatcherforward(request response)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(15)

웹 사이트를 위한 모든 요청을 처리하는 컨트롤러

작동원리

단일 핸들러 객체를 통한 요청 채널화

웹 핸들러와 커맨드 계층 두 부분으로 구성

bull 웹 핸들러 실행할 커맨드 선택

bull 커맨드 액션을 수행 응답으로 사용할 뷰 선택

- 12 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(25)

사용시점

하나의 프롞트 컨트롟러를 사용하므로 웹 서버의 구성이 간단

실행 시간에 데코레이터 역할 수행

참고 자료

Alur Crupi and Malks Core J2EE Patterns Best Practices and Design Strategies Prentice Hall 2001

Struts

- 13 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(35)

예제 단순표시

URL httplocalhost8080isamusicname=barelyWorksampcommand=Artist

- 14 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(45)

예제 단순표시

FrontServlet 클래스 컨트롟러

- 15 -

pubic void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

FrontCommand command = getCommand(request)

commandinit(getServletContext() request response)

commandprocess()

private FrontCommand getCommand(HttpServletRequest request)

try

return (FrontCommand) getCommandClass(request)newInstance()

catch(Exception e)

throw new ApplicationException(e)

privat Class getCommandClass(HttpServletRequest request)

Class result

final String commandClassName =

frontController + (String) requestgetParameter(command) + Command

catch(ClassNotFoundException e)

result = UnKnownCommandclass

return result

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(55)

예제 단순표시

FrontCommand 클래스 커맨드의 공통행위 정의

ArtistCommand 클래스

- 16 -

protected ServletContext context

protected HttpServletRequest request

protected HttpServletResponse response

public void init(ServletContext context HttpServletRequest request HttpServletResponse response)

thiscontext = context

thisrequest = request

thisresponse = response

abstract public void process() throws ServletException IOException

protected void forward(String target) throws ServletException IOException

RequestDispatcher dispatcher = contextgetReqeustDispatcher(target)

dispatcherforward(request response)

public void process() throws ServletException IOException

Artist artist = ArtistfindNamed(requestgetParameter(name))

requestsetAttribute(helper new ArtistHelper(artist)

forward(artistjsp)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(13)

마커를 HTML페이지 사이에 넣어 정보를 HTML로 표현

작동원리

마커 끼워넣기

헬퍼 객체

조건부표시

반복

스크립트 사용

- 17 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(23)

사용 시점

프로그래머와 디자이너의 공동작업이 가능

복잡한 로직이 페이지에 작성됨

테스트가 용이하지 않음

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

ArtistController 클래스 컨트롟러

artistjsp

- 18 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = ArtistfindNamed(requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

ltjspuseBean id=ldquohelperrdquo type=ldquoactionControllerArtistHelperrdquo scope=ldquorequestrdquogt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 12: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(15)

웹 사이트를 위한 모든 요청을 처리하는 컨트롤러

작동원리

단일 핸들러 객체를 통한 요청 채널화

웹 핸들러와 커맨드 계층 두 부분으로 구성

bull 웹 핸들러 실행할 커맨드 선택

bull 커맨드 액션을 수행 응답으로 사용할 뷰 선택

- 12 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(25)

사용시점

하나의 프롞트 컨트롟러를 사용하므로 웹 서버의 구성이 간단

실행 시간에 데코레이터 역할 수행

참고 자료

Alur Crupi and Malks Core J2EE Patterns Best Practices and Design Strategies Prentice Hall 2001

Struts

- 13 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(35)

예제 단순표시

URL httplocalhost8080isamusicname=barelyWorksampcommand=Artist

- 14 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(45)

예제 단순표시

FrontServlet 클래스 컨트롟러

- 15 -

pubic void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

FrontCommand command = getCommand(request)

commandinit(getServletContext() request response)

commandprocess()

private FrontCommand getCommand(HttpServletRequest request)

try

return (FrontCommand) getCommandClass(request)newInstance()

catch(Exception e)

throw new ApplicationException(e)

privat Class getCommandClass(HttpServletRequest request)

Class result

final String commandClassName =

frontController + (String) requestgetParameter(command) + Command

catch(ClassNotFoundException e)

result = UnKnownCommandclass

return result

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(55)

예제 단순표시

FrontCommand 클래스 커맨드의 공통행위 정의

ArtistCommand 클래스

- 16 -

protected ServletContext context

protected HttpServletRequest request

protected HttpServletResponse response

public void init(ServletContext context HttpServletRequest request HttpServletResponse response)

thiscontext = context

thisrequest = request

thisresponse = response

abstract public void process() throws ServletException IOException

protected void forward(String target) throws ServletException IOException

RequestDispatcher dispatcher = contextgetReqeustDispatcher(target)

dispatcherforward(request response)

public void process() throws ServletException IOException

Artist artist = ArtistfindNamed(requestgetParameter(name))

requestsetAttribute(helper new ArtistHelper(artist)

forward(artistjsp)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(13)

마커를 HTML페이지 사이에 넣어 정보를 HTML로 표현

작동원리

마커 끼워넣기

헬퍼 객체

조건부표시

반복

스크립트 사용

- 17 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(23)

사용 시점

프로그래머와 디자이너의 공동작업이 가능

복잡한 로직이 페이지에 작성됨

테스트가 용이하지 않음

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

ArtistController 클래스 컨트롟러

artistjsp

- 18 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = ArtistfindNamed(requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

ltjspuseBean id=ldquohelperrdquo type=ldquoactionControllerArtistHelperrdquo scope=ldquorequestrdquogt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 13: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(25)

사용시점

하나의 프롞트 컨트롟러를 사용하므로 웹 서버의 구성이 간단

실행 시간에 데코레이터 역할 수행

참고 자료

Alur Crupi and Malks Core J2EE Patterns Best Practices and Design Strategies Prentice Hall 2001

Struts

- 13 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(35)

예제 단순표시

URL httplocalhost8080isamusicname=barelyWorksampcommand=Artist

- 14 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(45)

예제 단순표시

FrontServlet 클래스 컨트롟러

- 15 -

pubic void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

FrontCommand command = getCommand(request)

commandinit(getServletContext() request response)

commandprocess()

private FrontCommand getCommand(HttpServletRequest request)

try

return (FrontCommand) getCommandClass(request)newInstance()

catch(Exception e)

throw new ApplicationException(e)

privat Class getCommandClass(HttpServletRequest request)

Class result

final String commandClassName =

frontController + (String) requestgetParameter(command) + Command

catch(ClassNotFoundException e)

result = UnKnownCommandclass

return result

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(55)

예제 단순표시

FrontCommand 클래스 커맨드의 공통행위 정의

ArtistCommand 클래스

- 16 -

protected ServletContext context

protected HttpServletRequest request

protected HttpServletResponse response

public void init(ServletContext context HttpServletRequest request HttpServletResponse response)

thiscontext = context

thisrequest = request

thisresponse = response

abstract public void process() throws ServletException IOException

protected void forward(String target) throws ServletException IOException

RequestDispatcher dispatcher = contextgetReqeustDispatcher(target)

dispatcherforward(request response)

public void process() throws ServletException IOException

Artist artist = ArtistfindNamed(requestgetParameter(name))

requestsetAttribute(helper new ArtistHelper(artist)

forward(artistjsp)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(13)

마커를 HTML페이지 사이에 넣어 정보를 HTML로 표현

작동원리

마커 끼워넣기

헬퍼 객체

조건부표시

반복

스크립트 사용

- 17 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(23)

사용 시점

프로그래머와 디자이너의 공동작업이 가능

복잡한 로직이 페이지에 작성됨

테스트가 용이하지 않음

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

ArtistController 클래스 컨트롟러

artistjsp

- 18 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = ArtistfindNamed(requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

ltjspuseBean id=ldquohelperrdquo type=ldquoactionControllerArtistHelperrdquo scope=ldquorequestrdquogt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 14: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(35)

예제 단순표시

URL httplocalhost8080isamusicname=barelyWorksampcommand=Artist

- 14 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(45)

예제 단순표시

FrontServlet 클래스 컨트롟러

- 15 -

pubic void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

FrontCommand command = getCommand(request)

commandinit(getServletContext() request response)

commandprocess()

private FrontCommand getCommand(HttpServletRequest request)

try

return (FrontCommand) getCommandClass(request)newInstance()

catch(Exception e)

throw new ApplicationException(e)

privat Class getCommandClass(HttpServletRequest request)

Class result

final String commandClassName =

frontController + (String) requestgetParameter(command) + Command

catch(ClassNotFoundException e)

result = UnKnownCommandclass

return result

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(55)

예제 단순표시

FrontCommand 클래스 커맨드의 공통행위 정의

ArtistCommand 클래스

- 16 -

protected ServletContext context

protected HttpServletRequest request

protected HttpServletResponse response

public void init(ServletContext context HttpServletRequest request HttpServletResponse response)

thiscontext = context

thisrequest = request

thisresponse = response

abstract public void process() throws ServletException IOException

protected void forward(String target) throws ServletException IOException

RequestDispatcher dispatcher = contextgetReqeustDispatcher(target)

dispatcherforward(request response)

public void process() throws ServletException IOException

Artist artist = ArtistfindNamed(requestgetParameter(name))

requestsetAttribute(helper new ArtistHelper(artist)

forward(artistjsp)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(13)

마커를 HTML페이지 사이에 넣어 정보를 HTML로 표현

작동원리

마커 끼워넣기

헬퍼 객체

조건부표시

반복

스크립트 사용

- 17 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(23)

사용 시점

프로그래머와 디자이너의 공동작업이 가능

복잡한 로직이 페이지에 작성됨

테스트가 용이하지 않음

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

ArtistController 클래스 컨트롟러

artistjsp

- 18 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = ArtistfindNamed(requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

ltjspuseBean id=ldquohelperrdquo type=ldquoactionControllerArtistHelperrdquo scope=ldquorequestrdquogt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 15: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(45)

예제 단순표시

FrontServlet 클래스 컨트롟러

- 15 -

pubic void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

FrontCommand command = getCommand(request)

commandinit(getServletContext() request response)

commandprocess()

private FrontCommand getCommand(HttpServletRequest request)

try

return (FrontCommand) getCommandClass(request)newInstance()

catch(Exception e)

throw new ApplicationException(e)

privat Class getCommandClass(HttpServletRequest request)

Class result

final String commandClassName =

frontController + (String) requestgetParameter(command) + Command

catch(ClassNotFoundException e)

result = UnKnownCommandclass

return result

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(55)

예제 단순표시

FrontCommand 클래스 커맨드의 공통행위 정의

ArtistCommand 클래스

- 16 -

protected ServletContext context

protected HttpServletRequest request

protected HttpServletResponse response

public void init(ServletContext context HttpServletRequest request HttpServletResponse response)

thiscontext = context

thisrequest = request

thisresponse = response

abstract public void process() throws ServletException IOException

protected void forward(String target) throws ServletException IOException

RequestDispatcher dispatcher = contextgetReqeustDispatcher(target)

dispatcherforward(request response)

public void process() throws ServletException IOException

Artist artist = ArtistfindNamed(requestgetParameter(name))

requestsetAttribute(helper new ArtistHelper(artist)

forward(artistjsp)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(13)

마커를 HTML페이지 사이에 넣어 정보를 HTML로 표현

작동원리

마커 끼워넣기

헬퍼 객체

조건부표시

반복

스크립트 사용

- 17 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(23)

사용 시점

프로그래머와 디자이너의 공동작업이 가능

복잡한 로직이 페이지에 작성됨

테스트가 용이하지 않음

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

ArtistController 클래스 컨트롟러

artistjsp

- 18 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = ArtistfindNamed(requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

ltjspuseBean id=ldquohelperrdquo type=ldquoactionControllerArtistHelperrdquo scope=ldquorequestrdquogt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 16: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄프론트 컨트롤러(55)

예제 단순표시

FrontCommand 클래스 커맨드의 공통행위 정의

ArtistCommand 클래스

- 16 -

protected ServletContext context

protected HttpServletRequest request

protected HttpServletResponse response

public void init(ServletContext context HttpServletRequest request HttpServletResponse response)

thiscontext = context

thisrequest = request

thisresponse = response

abstract public void process() throws ServletException IOException

protected void forward(String target) throws ServletException IOException

RequestDispatcher dispatcher = contextgetReqeustDispatcher(target)

dispatcherforward(request response)

public void process() throws ServletException IOException

Artist artist = ArtistfindNamed(requestgetParameter(name))

requestsetAttribute(helper new ArtistHelper(artist)

forward(artistjsp)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(13)

마커를 HTML페이지 사이에 넣어 정보를 HTML로 표현

작동원리

마커 끼워넣기

헬퍼 객체

조건부표시

반복

스크립트 사용

- 17 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(23)

사용 시점

프로그래머와 디자이너의 공동작업이 가능

복잡한 로직이 페이지에 작성됨

테스트가 용이하지 않음

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

ArtistController 클래스 컨트롟러

artistjsp

- 18 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = ArtistfindNamed(requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

ltjspuseBean id=ldquohelperrdquo type=ldquoactionControllerArtistHelperrdquo scope=ldquorequestrdquogt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 17: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(13)

마커를 HTML페이지 사이에 넣어 정보를 HTML로 표현

작동원리

마커 끼워넣기

헬퍼 객체

조건부표시

반복

스크립트 사용

- 17 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(23)

사용 시점

프로그래머와 디자이너의 공동작업이 가능

복잡한 로직이 페이지에 작성됨

테스트가 용이하지 않음

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

ArtistController 클래스 컨트롟러

artistjsp

- 18 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = ArtistfindNamed(requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

ltjspuseBean id=ldquohelperrdquo type=ldquoactionControllerArtistHelperrdquo scope=ldquorequestrdquogt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 18: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(23)

사용 시점

프로그래머와 디자이너의 공동작업이 가능

복잡한 로직이 페이지에 작성됨

테스트가 용이하지 않음

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

ArtistController 클래스 컨트롟러

artistjsp

- 18 -

public void doGet(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

Artist artist = ArtistfindNamed(requestgetParameter(name))

if(artist == null)

forward(MissingArtistErrorjsp request response)

else

requestsetAttribute(helper new ArtistHelper(artist))

forward(artistjsp request response)

ltjspuseBean id=ldquohelperrdquo type=ldquoactionControllerArtistHelperrdquo scope=ldquorequestrdquogt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 19: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄템플릿 뷰(33)

예제 개별 컨트롤러와 함께 JSP를 뷰로 사용하기

헬퍼를 사용하여 까다로운 스크립트렛 코드를 제거

- 19 -

ltULgt

lt for(Iterator it = helpergetAlbums()iterator() ithasNext())

Album album = (Album) itnext()gt

ltULgt

ltULgt

lttagforEach host=ldquohelperrdquo collection=ldquoalbumsrdquo id=ldquoeachrdquogt

ltLIgtltjspgetProperty name=ldquoeachrdquo property=ldquotitlerdquogtltLIgt

lttagforEachgt

ltULgt

public String getAlbumList()

StringBuffer result = new StringBuffer()

resultappend(ltULgt)

for(Iterator it = getAlbums()iterator() ithasNext())

Album album = (Album) itnext()

resultappend(ltLIgt)

resultappend(albumgetTitle())

resultappend(ltLIgt)

resultappend(ltULgt)

return resulttoString()

public List getAlbums()

return artistgetAlbums()

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 20: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(15)

도메인 데이터 Element 단위로 HTML로 변형

작동원리

도메인-지향 데이터를 HTML로 변홖

XSLT 변형 젃차

XML 모델 생성

XSLT Transformer로 변형

bull 결과 HTML 생성

bull HTTP Request에 저장

사용시점

작업하는 팀의 선호도(템플릿 뷰 변형 뷰)

- 20 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 21: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(25)

예제

AlbumCommand 클래스(프롞트 컨트롟러 참조)

- 21 -

public void process()

try

Album album = AlbumfindNamed(requestgetParameter(ldquonamerdquo))

AssertnotNull(album)

PrintWriter out = reponsegetWriter()

XsltProcessor processor = new SingleStepXsltProcessor(ldquoalbumxslrdquo)

outprintln(processorgetTransformation(albumtoXmlDocument())

catch (Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 22: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(35)

예제

Album XML 문서

- 22 -

ltalbumgt

lttitlegtStormcocklttitlegt

ltartistgtRoy Harperltartistgt

lttrackListgt

lttrackgtlttitlegtHors drsquoOeuvreslttitlegtlttimegt837lttimegtlttrackgt

lttrackgtlttitlegtThe Same Old Rocklttitlegtlttimegt1224lttimegtlttrackgt

lttrackgtlttitlegtOne Man Rock and Role Bandlttitlegtlttimegt723lttimegtlttrackgt

lttrackgtlttitlegtMe and My Womanlttitlegtlttimegt1301lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 23: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(45)

예제

XSLT 변형

- 23 -

ltxsltemplate match=ldquoalbumrdquogt

ltHTMLgtltBODY bgcolor=ldquowhiterdquogt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=ldquoalbumtitlerdquogt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=ldquoartistrdquogt

ltPgtltBgtArtist ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=ldquotrackListrdquogt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=ldquotrackrdquogt

ltxslvariable name=ldquobgcolorrdquogt

ltxslchoosegt

ltxslwhen test=ldquo(position() mod 2) = 1rdquogtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=ldquo$bgcolorrdquogtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=ldquotracktitlerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

ltxsltemplate match=ldquotracktimerdquogt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 24: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄변형(Transform) 뷰(55)

예제

결과 HTML

- 24 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 25: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(112)

두 단계로 도메인 데이터를 HTML로 변홖

- 25 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 26: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(212)

작동원리

- 26 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 27: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(312)

작동원리(계속)

- 27 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 28: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(412)

사용시점

단일-외관 애플리케이션

- 28 -

단일-외관 한 단계 뷰 단일-외관 두 단계 뷰

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 29: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(512)

사용시점

다중-외관 애플리케이션(한 단계 뷰)

- 29 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 30: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(612)

사용시점

다중-외관 애플리케이션(두 단계 뷰)

- 30 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 31: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(712)

예제

Album XML 문서

- 31 -

ltalbumgt

lttitlegtZero Hourlttitlegt

ltartistgtAstor Piazzolaltartistgt

lttrackListgt

lttrackgtlttitlegtTanguedia IIIlttitlegtlttimegt439lttimegtlttrackgt

lttrackgtlttitlegtMilonga del Angellttitlegtlttimegt630lttimegtlttrackgt

lttrackgtlttitlegtConcierto Para Quintetolttitlegtlttimegt900lttimegtlttrackgt

lttrackgtlttitlegtMilonga Localttitlegtlttimegt305lttimegtlttrackgt

lttrackgtlttitlegtMichelangelo 70lttitlegtlttimegt250lttimegtlttrackgt

lttrackgtlttitlegtContrabajisimolttitlegtlttimegt1018lttimegtlttrackgt

lttrackgtlttitlegtMumukilttitlegtlttimegt932lttimegtlttrackgt

lttrackListgt

ltalbumgt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 32: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(812)

예제

첫번째 단계 XSLT

- 32 -

ltxsltemplate match=albumgt

ltscreengtltxslapply-templatesgtltscreengt

ltxsltemplategt

ltxsltemplate match=albumtitlegt

lttitlegtltxslapply-templatesgtlttitlegt

ltxsltemplategt

ltxsltemplate match=artistgt

ltfield label=Artistgtltxslapply-templatesgtltfieldgt

ltxsltemplategt

ltxsltemplate match=trackListgt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

ltxsltemplate match=trackgt

ltrowgtltxslapply-templatesgtltrowgt

ltxsltemplategt

ltxsltemplate match=tracktitlegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

ltxsltemplate match=tracktimegt

ltcellgtltxslapply-templatesgtltcellgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 33: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(912)

예제

첫번째 변형 결과 XML 문서

- 33 -

ltscreengt

lttitlegtZero Hourlttitlegt

ltfield label=ArtistgtAstor Piazzolaltfieldgt

lttablegt

ltrowgtltcellgtTanguedia IIIltcellgtltcellgt439ltcellgtltrowgt

ltrowgtltcellgtMilonga del Angelltcellgtltcellgt630ltcellgtltrowgt

ltrowgtltcellgtConcierto Para Quintetoltcellgtltcellgt900ltcellgtltrowgt

ltrowgtltcellgtMilonga Localtcellgtltcellgt305ltcellgtltrowgt

ltrowgtltcellgtMichelangelo 70ltcellgtltcellgt250ltcellgtltrowgt

ltrowgtltcellgtContrabajisimoltcellgtltcellgt1018ltcellgtltrowgt

ltrowgtltcellgtMumukiltcellgtltcellgt932ltcellgtltrowgt

lttablegt

ltscreengt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 34: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1012)

예제

두번째 단계 XSLT

- 34 -

ltxsltemplate match=screengt

ltHTMLgtltBODY bgcolr = whitegt

ltxslapply-templatesgt

ltBODYgtltHTMLgt

ltxsltemplategt

ltxsltemplate match=titlegt

lth1gtltxslapply-templatesgtlth1gt

ltxsltemplategt

ltxsltemplate match=fieldgt

ltPgtltBgtltxslvalue-of select=labelgt ltBgtltxslapply-templatesgtltPgt

ltxsltemplategt

ltxsltemplate match=tablegt

lttablegtltxslapply-templatesgtlttablegt

ltxsltemplategt

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 35: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1112)

예제

두번째 단계 XSLT (계속)

- 35 -

ltxsltemplate match=tablerowgt

ltxslvariable name=bgcolorgt

ltxslchoosegt

ltxslwhen test=(position() mod 2) = 1gtlinenltxslwhengt

ltxslotherwisegtwhiteltxslotherwisegt

ltxslchoosegt

ltxslvariablegt

lttr bgcolor=$bgcolorgtltxslapply-templatesgtlttrgt

ltxsltemplategt

ltxsltemplate match=tablerowcellgt

lttdgtltxslapply-templatesgtlttdgt

ltxsltemplategt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 36: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄두 단계(Two Step) 뷰(1212)

예제

AlbumCommand 클래스 (프롞트 컨트롟러)

- 36 -

public void process()

try

Album album = AlbumfindNamed(requestgetParamater(name))

album = AlbumfindNamed(1234)

AssertnotNull(album)

PrintWriter out = responsegetWriter()

XsltProcessor processor = new TwoStepXsltProcessor(album2xsl ldquosecondxsl)

outprint(processorgetTransformation(albumtoXmlDocument())

catch(Exception e)

throw new ApplicationException(e)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 37: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(18)

화면 항해와 어플리케이션 흐름을 제어

- 37 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 38: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(28)

작동원리

사용시점

애플리케이션 흐름이 많은 곳에서 유사한 경우

참고 자료

Knight and Dai ldquoObjects and the Webrdquo IEEE Software MarchApril 2002

- 38 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 39: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(38)

예제

자산을 위한 간단한 상태 다이어그램

- 39 -

반홖(return)

ldquoOn Leaserdquo 상태에서는 자산반홖에대한 페이지를 표시하고 ldquoIn Inventoryrdquo 상태에서는 오류메세지페이지 표시

손상(damage)

재고(In Inventory) 또는 리스(On Lease) 상태에 따라 상이한페이지 표시

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 40: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(48)

예제

자산 애플리케이션 컨트롟러

- 40 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 41: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(58)

예제

FrontServlet 입력 컨트롟러(프롞트 컨트롟러)

ApplicationController 인터페이스

- 41 -

public void service(HttpServletRequest request HttpServletResponse response)

throws IOException ServletException

ApplicationController appController = getApplicationController(request)

String commandString = (String) requestgetParameter(ldquocommandrdquo)

DomainCommand comm =

appControllergetDomainCommand(commandString getParameterMap(request)

commrun(getParameterMap(request))

String viewPage =

ldquordquo + appControllergetView(commandString getParameterMap(request)) + ldquojsprdquo

forward(viewPage request response)

DomainCommand getDomainCommand(String commandString Map params)

String getView(String commandString Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 42: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(68)

예제

Response 클래스

DomainCommand 인터페이스

- 42 -

private Class domainCommand

private String viewUrl

public Response(Class domainCommand String viewUrl)

thisdomainCommand = domainCommand

thisviewUrl = viewUrl

public DomainCommand getDomainCommand()

try

return (DomainCommand) domainCommandnewInstance()

catch (Exception e) throw new ApplicationException (e)

public String getViewUrl()

return viewUrl

abstract public void run(Map params)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 43: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(78)

예제

AssetApplicationController 클래스

- 43 -

private Response getResponse(String commandString AssetStatus state)

return (Response) getResponseMap(commandString)get(state)

private Map getResponseMap(String key)

return (Map) eventsget(key)

private Map events = new HashMap()

public DomainCommand getDomainCommand(String commandString Map params)

Response response = getResponse(commandString getAssetStatus(params))

return responsegetDomainCommand()

private AssetStatus getAssetStatus(Map params)

String id = getParam(ldquoassetIDrdquo params)

Asset asset = Assetfind(id)

return assetgetStatus()

private String getParam(String key Map params)

return ((String[]) paramsget(key)) [0]

계속hellip

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 44: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄애플리케이션 컨트롤러(88)

예제

AssetApplicationController 클래스

- 44 -

public String getView(String commandString Map params)

return getResponse(commandString getAssetStatus(params))getViewUrl()

public void addResponse(String event Object state Class domainCommand String view)

Response newResponse = new Response(domainCommand view)

if(eventscontainsKey(event))

eventsput(event new HashMap())

getResponseMap(event)put(state newResponse)

private static void loadApplicationController(AssetApplicationController appController)

appController = AssetApplicationControllergetDefault()

appControlleraddResponse(ldquoreturnrdquo AssetStatusON_LEASE

GatherReturnDetailsCommandclass ldquoreturnrdquo)

appControlleraddResponse(ldquoreturnrdquo AssetStatusIN_INVENTORY

NullAssetCommandclass ldquoillegalActionrdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusON_LEASE

InventoryDamageCommandclass ldquoleaseDamagerdquo)

appControlleraddResponse(ldquodamagerdquo AssetStatusIN_INVENTORY

LeaseDamageCommandclass ldquoinventoryDamagerdquo)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 45: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄12 Ajax 개요

Ajax 개요

Ajax 프리젠테이션

Ajax 동작방식

Ajax 원칙

Ajax 사례들

Ajax의 대안들

JavaScript

Sarissa

- 45 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 46: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

ldquoArdquo 는 asynchronous

요청은 동기 또는 비동기로 이루어짐

사용자가 요청중에도 사용해야 할 경우 비동기 사용

ldquoJrdquo 는 Java

JavaScript는 클라이언트 즉 브라우저에서 사용

서버에서는 HTTP 요청을 받을 수 잇는 어떤 언어든 사용할 수 잇음

bull Java Servlet Ruby Servlet CGI scripts hellip

ldquoXrdquo는 XML

요청과 응답 메시지는 XML로 구성할 수 잇음

어떤 텍스트든 포함할 수 잇음(단일 텍스트 값 구분자 텍스트 hellip)

- 46 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 47: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄AJAX 개요

비동기 요청

구글맵 ndash mapsgooglecom

구글제안 ndash wwwgooglecomsuggest

bull 입력한 단어에 해당하는 가능한 topic 목록을 갱싞함

동기 요청

서버로 요청을 제출한 후에 페이지의 특정 부분을 갱싞하거나 데이터를 검색할 수 잇음

보다 나은 사용자 경험을 제공

- 47 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 48: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션(12)

애플리케이션 구조 설계

- 48 -

JSF

StrutsServlet

HTML

JavaBean

EJB 컴포넌트

데이터베이스 XMSJMS 기업외부 시스템B2B 통싞

클라이언트

웹 컨테이너

EJB 컨테이너

00 프레임워크

데이터접근 프레임워크

EJB 컴포넌트

외부 호출비동기 호출

리치 인터넷클라이언트

[SWTJWS]

모바일클라이언트

웹 브라우저

AJAX 엔짂

웹애

플리

케이

션프

레임

워크 차세대 인터넷 App 아키텍처는 사용자

의 웹 경험을 그대로 유지하면서 기존웹 애플리케이션이 가지는 문제점을 해결하는 것을 제일 목표로 한다

1 AJAX 웹 페이지 컨텎츠(HTML Javascript)의 round-trip을 방지하는 기법으로 새로운 기술이 아니라 기존의javascript XML 기술을 조합하여 사용

2 Struts 흐름 제어를 위한 프레임워크로 Tile Form Validation 등의 부가적인장점을 가짐

3 JSF 웹의 차세대 표준 프레임워크로웹 페이지의 요소들을 컴포넌트화 하여줌

4 SWTJWS eclipse 짂영에서 제시하는리치클라이언트 솔루션으로 RCP(Rich Client Platform)으로 확장가능하며 시장성숙도는 떨어지나 기술성숙도는 높음

Struts(JSF 일부도입)

[ 2005년 안 ][ 2006년 안 ]

이젂가능

AJAX Asynchronous Java script and XML

SWT Standard Widget Toolket

JWS Java Web Start

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 49: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 프리젠테이션 (22)

프리젠테이션 구조 설계

- 49 -

웹 컨테이너 (WAS 서버)

클라이언트 PC

Servlet

JavaBean

웹 브라우저

AJAX 엔짂

Struts(JSF 일부 도입)

페이지 요청[HTTP]

웹 서버

페이지 응답[HTTPHTML]

데이터 요청[HTTP]

데이터 응답[HTTPXML]

사용자 인터페이스(HTML)

자바스크립트 호출 HTML+CSS 데이터

Key point 비동기 호출구현

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 50: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 (12)

- 50 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 51: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식(22)

- 51 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 52: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작 방식 - 예

Ajax 요청 세 단계

- 52 -

브라우저

XHR 객체

서버

request

response

1 XHR 객체 초기화 2 서버로 요청

3 응답 파싱

var xhr

if (documentXMLHttpRequest)

xhr = new XMLHttpRequest()

else

xhr = new ActiveXObject(MicrosoftXMLHTTP)

else

alert(cannot use Ajax)

open(http_method url)

open(http_method url asynchronous)

open(http_method url asynchronous userid password)

xhropen(GET servletsajaxgetItemid=321 true)

xhrsend(``)

xhronreadystatechange = function()

var ready = xhrreadyState

if (ready == 4)

var status = xhrstatus

if (status gt= 200 ampamp status lt 300)

parseCompletedResponse(xhr)

else

parseErroredResponse(xhr)

1

2

3

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 53: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash 예 Hello stranger

- 53 -

lthtmlgtltheadgtlttitlegtHello Ajax version 1lttitlegtltstyle type=textcssgt font-family Tahoma Arial sans-serif helloTitle color 48f font-size 15em ltstylegtltscript type=textjavascript src=prototypejsgtltscriptgtltscript type=textjavascriptgtwindowonload=function()documentgetElementById(helloBtn)onclick=function()var name=documentgetElementById(helloTxt)valuenew AjaxRequest(

hello1jspname=+encodeURI(name)methodgetonCompletefunction(xhr)

documentgetElementById(helloTitle)innerHTML=xhrresponseText

)

ltscriptgtltheadgtltbodygtlth1 id=helloTitlegtHello strangerlth1gtltpgtPlease introduce yourself by entering your name in the box belowltpgtltinput type=text size=24 id=helloTxtgtltinputgtampnbspltbutton id=helloBtngtSubmitltbuttongtltbodygtlthtmlgt

lt--simple JSP to generate some questions - and answers--gtltjspdirectivepage contentType=textplaingtltString name=requestgetParameter(name)gtHello lt=namegt

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 54: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 동작방식 ndash Hello

실제 동작하는 방식을 실습을 통해 확인합니다

실습 홖경

eclipse

Tomcat

IE웹브라우저

- 54 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 55: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(14)

Ajax 원칙 1

브라우저는 컨텎츠가 아니라 애플리케이션을 담는다

- 55 -

[Ajax in Action]

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 56: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(24)

Ajax 원칙 2

서버는 컨텎츠가 아니라 데이터를 젂달한다

- 56 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 57: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(34)

Ajax 원칙 3

애플리케이션과의 상호작용은 유동적이며 지속적이다

- 57 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 58: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 원칙(44)

Ajax 원칙 4

실제 코딩이며 원칙이 필요하다

bull Ajax이젂의 JavaScript 코딩은 특정 목적을 위해 조금씩 사용함

bull 독립 애플리케이션으로서의 구조와 모델을 가져야 함

- 58 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 59: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 사례들

Google의 사례들

Google Map

Google GMail

- 59 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 60: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들

매크로미디어 플래시

상호작용이 용이하며 ActionScript를 이용하여 프로그램을 작성함

벡터 그래픽 지원 우수함

웹브라우저 플러그-인에 의존하는 설계는 바람직하지 않음

오픈소스 Laszlo와 유사함

플래시 기반의 업무 UI를 생성하는 서버 프레임워크를 제공함

Java Web Start와 관련 기술들

다운로드되면 파일시스템의 ldquo샊드박스rdquo 안에 저장됨

새로운 버젂이 잇을 경우 자동으롟 업데이트 됨

네트워크 접속되지 않았을 경우도 사용 가능함

수 메가바이트의 애플리케이션 코드를 다운 받아야 함

SWT(Standard Widget Toolkit) 도 비슷함 eclipse 플랫폼 사용

Net No Touch Deployment

- 60 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 61: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax의 대안들 ndash SWT 트레이더

kk

- 61 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 62: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - 개요

Java와 문맥이 비슷한 프로그래밍 언어

웹브라우저 지원

JavaScript는 html과 함께 클라이언트로 다운로드하여 실행할 수 잇음

HTML에서 사용하기 위한 예약어

HTML의 헤드부분에서 ltscriptgt 태크사용

HTML 안에 JavaScript를 포함하거나 외부 JavaScript 파일을 참조함

embeding

bull ltscript type=ldquotextjavascriptrdquogt hellip code hellip ltscriptgt

refering

bull ltscript type=ldquotextjavascriptrdquo src=ldquourlrdquogtltscriptgt

XHTML DTD에서 script 태크

lt ELEMENT script (PCDATA) gt

- 62 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 63: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

JavaScript 클래스로서 대부분의 웹브라우저에서 지원함

JavaScript 코드로부터 HTTPRequest호출 지원

서로 다른 여러 XHR을 이용하여 다중 동시 호출 가능

HTTP 응답은 핸들러에 의해 처리됨

핸들러 클라이언트 측의 JavaScript 코드

XHR 객체 생성은 브라우저 마다 다름

이를 감추기 위해 Sarissa와 같은 라이브러리를 사용할 수 잇음

- 63 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 64: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XmlHttpRequest

상태

0 초기화 안됨 open됨 호출 안됨

1 탑재중 send 되었지만 호출되지 않음

2 탑재됨 send 헤더 콜 상태

3 상호작용 응답 일부 다운로드

4 완료

responseText

응답을 텍스트로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

responseXml

응답을 DOM Document 객체로 받음 에러 시 null을 리턴하고 상태값은 3보다 작음

status

상태를 나타내는 정수 코드

statusText

상태를 표현하는 문자열

- 64 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 65: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄JavaScript - XMLHttpRequest

기본 메소드

open(method url async)

bull 메소드(method)는 ldquoGETrdquo ldquoPOSTrdquo ldquoPUTrdquo ldquoDELETErdquo일 수 잆음

bull url은 반드시 Http url이어야 함(http로 시작)

bull async는 요청이 비동기 여부임 기본값은 true 즉 비동기임

send(body)

bull Http 요청을 보냄

bull body는 null일 수 잇음

abort()

bull send() 후에 취소하고자 할 경우

헤더 메소드

void setRequestHeader(name value)

String getResponseHeader(name)

String getAllResponseHeaders()

bull ldquoheadervaluerdquo 쌍을 리턴함

bull 캐리지리턴으로 구분됨

- 65 -

Connection Keep-AliveDate Sun 15 May 2008 121010 GMTContext-Type TextxmlServer WEBrick131Content-Length 1234

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 66: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa

오픈소스 자바 스크립트 라이브러리로 브라우저 독립적인 기능 지원

XMLHttpRequest 객체 생성(sarissajs)

DOM (비동기) 또는 SAX(비동기) 방식을 이용하여 Xml 파싱

DOM을 이용한 Xml 생성

XSLT를 이용하여 Xml 변홖

XPath를 이용하여 Xml 질의

다운로드 사이트

httpsourceforgenetprojectssarissa

- 66 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 67: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Sarissa - XMLHttpObject 다루기

XMLHttpRequest 생성

var xhr = new XMLHttpRequest()

동기 ldquoGETrdquo 메시지를 보내고 응답 받음

xhropen(ldquoGETrdquo url false)

var body = null

xhrsend(body)

var domDoc = xhrresponseXML

var xmlString = Sarissaserialze(domDoc)

비동기 ldquoGETrdquo 메시지 보냄

xhrget(ldquoGETrdquo url true)

bull xhronreadystatechange = funtion()

bull if (xhrreadyState == nul)

bull var domDoc = xhrresponseXML

bull var xmlString = Sadassaserialize(domDoc)

bull

bull var body = null

bull xhrsend(body) - 67 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 68: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄요약

Ajax 데이터 젂송을 위한 데이터 포맷은 어떤 것이 적젃한가

단숚 텍스트

Xml

JSON

- 68 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 69: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄13 상용 제품을 통해 바라본 Ajax

소개

사용자 인터페이스의 진화

RIA 시장

엔터프라이즈 Ajax 접근방법

Ajax 리스크

엔터프라이즈 Ajax

Ajax 클라이언트 프레임워크

Ajax 서버 프레임워크

Ajax 개발도구

- 69 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 70: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄개요

이 자료는 BackBase 사의 자료를 기반으로 작성함

BackBase 특정한 내용들은 제거하고 Ajax 프레임워크가 가져야 할 일반적인 기능중심으로 서술함

참고 사이트 wwwbackbasecom

- 70 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 71: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄사용자 인터페이스 진화hellip

ldquoRIArdquo

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 72: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

엔터프라이즈 Ajax 프레임워크

Ajax 개요

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 73: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 60 애플리케이션이 RIA 채택

가트너에 따르면 60에 이르는 웹 애플리케이션이 RIA를 채택하고자 함

- 73 -

Presentation

Layer

Traditional

HTML

RIA

Technology

Proprietary

Plug-ins

Open Standards

Browser Based

ldquoAJAXrdquo

Open Source

Do it Yourself

ENTERPRISE

BACKBASEMicrosoft

Silverlight

Adobe

FLEX

60

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 74: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄RIA 시장 ldquo플러그-인rdquo과ldquo브라우저rdquo 기반

플러그-인 기반 대 브라우저 기반 RIA

- 74 -

플러그-인 기반 RIA

Install Separate Player

Replace HTML

Proprietary Vendor Lock-in

브라우저 기반 RIA

AJAXBACKBASE

No Install Needed

Extend HTML

Standards Based

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 75: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax 접근방법

상업용 프레임워크를 홗용한 엔터프라이즈 Ajax

- 75 -

상업용 프레임워크

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

기본 Ajax 프로그래밍

+ Zero Install

+ Open Standards

+ Extend HTML

+ Native in Browser

- Cross-Browser Incompatibility

- JavaScript Spaghetti

- Poor Maintainability

- Lack of Standards

- No Governance

- Difficult to Learn

- Hotchpotch of Widgets

- Lack of Behaviors

- Lack of Patterns

- Lack of Tooling

- Lack of Server-side integration

- No Vendor Support (liability)

+ Cross-Browser Compatible

+ OO Inheritance

+ Structure Re-use

+ Enable Standards (W3C)

+ Enforce Governance

+ Easy to learn XML Tags

+ Complete + Integrated Widget Lib

+ Pre-build Behaviors Best Practices

+ Best Practices

+ Integrated Dev Tooling

+ Server-side Integration Framework

+ Solid Enterprise Support

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 76: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 리스크 ndash JavaScript 스파게티

유지보수성

생산성

확장성

- 76 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 77: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax - 조건

Ajax 기반 RIA를 위한 완젂한 프레임워크

완벽한 클라이언트-서버 아키텍처

개발도구 지원

표준 기반 오픈 아키텍처

Ajax UI 개발 정형화

사용자 인터페이스를 위한 표준 구조 정의

MVC 디자인 패턴으로부터 출발

객체지향 아키텍처

패턴 기반 UI 구현을 위한 XML-바인딩을 통한 XML 태그 생성

이중 프로그래밍 모델

선언적(태그 라이브러리) ndash 배우기 쉽고 유지보수가 쉬움

기능적(JavaScript) ndash 고급 프롞트-엔드 개발자 대상

- 77 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 78: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (13)

서버-회의론적인 클라이언트 프레임워크

모든 웹 브라우저에서 실행되는 클라이언트 프레임워크

서버 기술과 독립적인 UI 정의

클라이언트-서버 간의 통합통싞을 위한 다양한 옵션

bull Ajax 요청 (HTTP)

bull Server 동기화 (eg JSF)

bull Java to Ajax API

bull Data 모듈 (eg CRUD)

bull Web Services (eg SOAP XML-RPC)

bull Timed Action

bull Push DWR Bayeux

둘 갂의 명확한 분리 추구

UI 로직과 비즈니스 로직

위젯의 표면(skin)과 기능

서버측 UI 컴포넌트와 관련 클라언트 측 UI 기능

- 78 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 79: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (23)

엔터프라이즈에 언제든 홗용할 준비를 함

프레임워크 간의 유지보수성

프레임워크 간의 확장성

애플리케이션 생명주기 간의 생산성

스킨 테마 맞춤

위젯 행위 리치 애플리케이션 모듈화

태스크 분리와 협업을 통한 관심사의 분리

실행지침과 UI 패턴의 재사용

여러 어플리케이션에 걸쳐 일관된 룰-앢-필

접근성과 보안성

Ajax 개발을 단순하게 함

Xml 태그 사용 단숚화 (JavaScript의 대안)

서버측 프리젠테이션 기술 확장(Struts JSF)

여러 브라우저에 걸쳐 클라이언트 측 Ajax 디버깅

비주얼 Ajax 빌더

- 79 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 80: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄엔터프라이즈 Ajax ndash 목표 (33)

모든 브라우저에 XML 표준이 가능하게 함

XML의 일차 목적은 서로 다른 정보 시스템 간에 구조적인 데이터를 공유하는 것임

문제점

bull 브라우저는 XML을 이해하지 못하고 유용한 W3C 표준을 지원하지 않음

bull 서버에서 리치 XML을 단숚한 HTML로 변홖해야 하므로 XML의 장점을 잃게됨

목표

bull XML 표준을 클라이언트에서 실행가능한 브라우저용 런타임을 제공함

bull 브라우저를 안정적인 UI 개발 플랫폼으로 업그레이드

- 80 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 81: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크

클라이언트 프레임워크가 제공해야 하는 것들

- 81 -

위젯 위젯 라이브러리

제 3차 위젯 통합

프로그래밍 모델기능적 JavaScript

선언적 XML

브라우저 호홖성브라우저 균등화

W3C 표준

통제객체 지향

XML 바인딩

클라이언트 프레임워크 SERVER

Server Agnostic

Java

NET

PHP

ColdFusion

Ruby

ABAP

hellip

RIA 서비스

통싞 서비스

데이터 서비스

시각화 서비스

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 82: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 브라우저 호환성

- 82 -

브라우저 균등화

W3C 표준 지원

FF NN O SIE 55 IE 6 IE 7

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 83: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 객체 지향

- 83 -

Events

Handlers

Resources

Ajax 클라이언트 프레임워크

프로그래밍 모델 ndash 객체 지향

Methods (JS and XML)

Handlers (JS and XML)

Attributes (change)

Properties (setget)

다중 상속

인터페이스

Constructor Destructor

DOM Element

(base class)

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 84: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 ndash 코드 유지보수

- 84 -

Resources

Ajax 클라이언트 프레임워크

코드 유지보수

XML 바인딩

Name Spaces

객체지향

프로그래밍자원 관리

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 85: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 서비스

- 85 -

Data Services

I18n Localization

Targeting (XPath 20)

Transformation (XSLT)

Data Binding (CRUD)

Validation

Formatting

Visualization Services

Drag amp Drop

Bookmark

Keyboard Navigation

Styles

Animations Themes

Effects

Resize

Back-Forward

Accessibility ndash Section 508

Communication Services

XML

hellip

JSON

SOAP

Portal (JSR 168 WSRP)

Push (DWR Bajeux)

Ajax 클라이언트 프레임워크

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 86: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 86 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 87: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 클라이언트 프레임워크 - 위젯

- 87 -

위젯

Ajax 클라이언트 프레임워크

ListGrid

Menu

Calendar

PanelSet

ListBox

Tree

Slider

Spinner

Accordion

Balloon

Button

GroupTable

Window

Tooltip

TreeGrid

Rich Text Color Picker

ComboBox

TaskBar

Spreadsheet

Charting Maps AutoCompl Rich Forms Morehellip

Dojo

Yahoo UI

Google

Flash

Silverlight

Custom

Widgets

New

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 88: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 서버 프레임워크 - 개요

- 88 -

SERVER Framework

Server Agnostic

CLIENT Framework

JSF

FrameworkAdjustable Components

Ajax Characteristics

JSF Ajax Components

App Server Compatibility

Server Sync (JSF Lifecycle)

Java

Communication

Services

Data Module

Java to Ajax API

Push (DWR Bajeaux)

Java

Connector

Services Portal Connector

JSP Struts Spring Connect

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 89: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 - 디버거

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 90: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더

- 90 -

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -

Page 91: 프리젠테이션아키텍처 - pds11.egloos.compds11.egloos.com/pds/200810/27/89/Presentation_Architecture-AJAX.pdf · 교육일정표 교육은매회4 갂씩 총6회에걸쳐진행합니다

과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved

중소기업직업훈련컨소시엄질의 응답

주제 토의

질의 응답

감사합니다hellip

- 91 -