프리젠테이션아키텍처 -...
TRANSCRIPT
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
엔터프라이즈 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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
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 -
과정명 프리젠테이션 아키텍처 - 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 -
과정명 프리젠테이션 아키텍처 - 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 -
과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved
중소기업직업훈련컨소시엄Ajax 개발도구 ndash 비주얼 Ajax 빌더
- 90 -
과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved
중소기업직업훈련컨소시엄질의 응답
주제 토의
질의 응답
감사합니다hellip
- 91 -
과정명 프리젠테이션 아키텍처 - AJAXCopyright copy 2007 KOSTA all rights reserved
중소기업직업훈련컨소시엄질의 응답
주제 토의
질의 응답
감사합니다hellip
- 91 -