Eclipse Eclipse의 Ajax Toolkit Framework에서 지원되는 툴 (한글)

황제낙엽 2007.03.03 09:19 조회 수 : 54 추천:74

sitelink1  
sitelink2  
sitelink3  

출처 및 링크 :: http://www-128.ibm.com/developerworks/kr/library/os-ecl-ajax/index.html

Open Asynchronous JavaScript and XML (Ajax) Initiative를 후원하는 파트너들은 개발자들이 협업할 수 있는 오픈 플랫폼을 구현함으로써 커뮤니티를 강화하고 있다. BEA Systems, Borland Software, the Dojo Foundation, Eclipse Foundation, Google, IBM, Laszlo Systems, Mozilla, Novell, Openwave Systems, Oracle, Red Hat, Yahoo!, Zend Technologies, Zimbra 같은 이 이니셔티브의 창립 멤버들은 Ajax 개발자들의 커뮤니티에 새로운 툴을 도입하는 것이 얼마나 중요한지를 깨닫고 있다. 이 이니셔티브는 광범위한 툴을 응답성 있는 사용자 인터페이스(UI)를 구현하는 사람들에게 제공하는 것이다. Eclipse의 통합 인터페이스와 고급 디버깅 기능은 엔터프라이즈 급의 코딩 환경을 커뮤니티로 가져온다. Eclipse의 ATF는 Dojo와 Zimbra에서 툴킷에 쉬운 액세스를 제공한다.

이니셔티브 멤버들은 Open Ajax의 후원이 웹의 생명력을 유지하는데 중요하다고 믿고 있다. Open Ajax Initiative는 웹의 건재를 위해 필요한 것들을 수행하고 있다.

주: Open Ajax Initiative에 관한 언론 배포 자료는 참고자료를 참조하라.

Eclipse ATF

Eclipse Foundation은 오픈 소스 개발과 강력한 애플리케이션 프레임웍을 위한 지침이 되어왔다. Eclipse는 자바 기반의 오픈 소스 개발 플랫폼으로서 확장 가능하고 메이저 플랫폼에 전개될 수 있다. 다양한 플러그인과 툴을 사용할 수 있다.

Open Ajax Initiative의 일환으로 Eclipse 파운데이션은 ATF를 구현하고 있다. 이것은 Dojo와 Zimbra 같은 런타임 환경에 확장 가능한 프레임웍을 제공한다. ATF는 Open Ajax Initiative의 일부인 툴들을 통합하는 중앙 컴포넌트로서 작동한다. ATF의 초기 버전은 IBM alphaWorks 에서 사용할 수 있다.(참고자료)

Eclipse Web Tools Project에 기반하고 있는 ATF는 독립 개발 환경(IDE)을 구현하는데 필요한 툴을 제공한다. 런타임 신택스 검사 같은 기능이 포함되어 있고 JavaScript 디버거, Document Object Model (DOM) 브라우저, Mozilla 웹 브라우저를 삽입한다. ATF는 늘 부족했던 오픈 소스 개발 툴의 기능에 완벽한 엔터프라이즈 스타일의 개발 환경을 제공한다. 본 튜토리얼에서는 가장 뛰어나고 성숙한 Ajax 툴인 Dojo와 Zimbra를 중점 설명하도록 하겠다. 그림 1은 이니셔티브의 컴포넌트와 ATF가 여기에 어떻게 조합되는지를 보여주고 있다.


그림 1. Open Ajax Initiative 컴포넌트
Open Ajax Initiative components



위로


Dojo

Open Ajax Initiative에 사용된 툴이 채택될 것이라는 것을 예상하고 Dojo와 Zimbra 같은 ATF가 지원할 툴킷에 익숙해 지는 것이 좋다.

Dojo 는 JavaScript와 Dynamic Hypertext Markup Language (DHTML) 커뮤니티를 표준 JavaScript 라이브러리를 구현하여 일관된 방향으로 통합하기 위해 설계된 커뮤니티 프로젝트이다. 이 커뮤니티는 함께 일하는 사람들 없이는 성공할 수 없다는 것을 깨달았기 때문에 세 개의 이전 툴킷들을 통합하여 Dojo Foundation을 만들었다. 여기에서 코드를 소유 및 관리한다. Dojo는 Ajax 에디션, I/O 에디션 "Kitchen Sink"에디션 같은 여러 옵션 패키지들을 갖고 있다. 여기에는 전체 툴 세트가 포함된다.

Dojo를 시작하는 것은 다섯 개의 에디션들 중 하나를 다운로드 하는 것 만큼 간단하다.

  • Ajax -- Ajax 에디션을 사용하여 비동기식 I/O (XmlHttp)를 사용하여 애플리케이션을 만들고 복잡한 시각 효과를 통합하고 aspect 지향 이벤트 시스템을 사용한다.
  • I/O (XmlHttp) -- I/O 에디션은 dojo.io.bind로 구현되기 때문에 비동기식 I/O에 XmlHttp를 사용할 수 있다.
  • Event + I/O -- 이 에디션에는 Dojo의 aspect 지향 이벤트 시스템과 XmlHttp 레이어가 포함되어 있다.
  • Widgets -- 위젯 구현에 약결합 된 HTML과 Cascading Style Sheet (CSS) 템플릿 기능이 포함된다. 스타일, 콘텐트, 로직을 분명히 구분한다.
  • "Kitchen Sink" -- 모든 Dojo 라이브러리를 구현한다.

Dojo 설치하기

알맞은 Dojo 에디션을 선택하여 이것을 다운로드하고 패키지를 푼다. 다음 파일들을 루트 웹 디렉토리로 옮긴다. (helloworld.html 파일도 추가해야 한다.)

  • dojo.js
  • iframe_history.html
  • src (directory)
  • helloworld.html

.html 파일에 Dojo 파일로 가는 경로를 담은 한 줄을 추가한다. 

<script type="text/javascript" src="path/to/dojo/dojo.js"></script>

이제 JavaScript에 Dojo 라이브러리와 위젯을 로딩한다.(참고자료)

Dojo 예제

버튼을 누를 때 마다 디버그 프로세스를 통해 "Hello World!"를 프린트 하는 간단한 예제를 보도록 하자. 이 예제에서는 helloworld.html을 편집할 것이다. Listing 1에 보이는 코드의 처음 부분에서는 dojo.js에 대한 경로를 설정하고 디버그 모드를 켜서 아웃풋을 테스트 할 수 있도록 한다.


Listing 1. "Hello World!"를 프린트하는 예제 
<html>  
<head>    
<script type="text/javascript">      
djConfig = { isDebug: true };    
<script>    
<script type="text/javascript" src="./dojo.js">
</script>

helloPressed를 호출하는 "events"를 가진 Button2위젯


Listing 2. helloPressed를 호출하는 "events"를 가진 Button2위젯 
<!-- DOJO EXECUTION -->
<script type="text/javascript">  
dojo.require("dojo.widget.Button2");  
dojo.require("dojo.event.*");

helloPressed 함수는 dojo.debug를 호출하여 "Hello World!" 메시지를 프린트한다.

function helloPressed(){  dojo.debug('Hello World!');}

init 함수가 있다. 이것은 helloButton을 Dojo 위젯과 제휴시킨다. 두 번째 라인은 helloPressed 함수가 Press Me를 클릭할 때 호출된다는 것을 나타내고 있다. 

function init(){  var helloButton = dojo.widget.byId('helloButton');  
dojo.event.connect(helloButton, 'onClick', 'helloPressed');}

다음 라인은 초기 페이지 로드 시 init 함수를 실행한다. 

dojo.addOnLoad(init);

마지막으로 HTML 바디에는 실제 버튼이 포함되어 있는데, 여기에는 위의 JavaScript와 제휴되는 유형과 Id가 주어진다.


Listing 3. ID와 위 JavaScript 제휴시키기 
    </script>  </head>  <body>    
<button dojoType="Button2" widgetId="helloButton">Press Me</button>  
</body></html>

그림 2는 Press Me를 클릭한 후 "Hello World!" Dojo 애플리케이션의 아웃풋 모습이다.


그림 2. "Hello World!" Dojo 애플리케이션의 아웃풋
Output of Hello World

상세한 HelloWorld 예제는 Dojo wiki를 참조하기 바란다.(참고자료)

Dojo는 Ajax 코드 조각들을 기존 웹 페이지에 쉽게 통합시킨다. UI 효과를 쉽게 추가할 수 있는 강력한 위젯 세트가 있기 때문이다. 개발자들은 UI의 모든 부분을 직접 작성할 필요가 없다. 고급 사용자들에게는 대부분의 툴들이 제공하지 못하는 기능들을 제공한다. 예를 들어, 프로젝트를 전개에 맞춰 최적화시키기 위한 패키징 및 구현 시스템이 포함된다. Dojo는 모든 레벨의 Ajax 개발자들을 위한 훌륭한 솔루션이다.

Dojo를 Eclipse에 통합하는 ATF가 도입되어 그래픽 코딩 환경을 제공함으로서 엔터프라이즈 레벨 까지 이 기능을 확대하고 기타 Eclipse 플러그인으로 액세스 한다. Eclipse에서 Dojo의 초기 데모는 참고자료를 참조하라.




위로


Zimbra Ajax Toolkit

Zimbra는 Zimbra Ajax Toolkit (AjaxTK)으로 오픈 액세스를 제공함으로서 Open Ajax Initiative에 기여하고 있다. Zimbra는 AjaxTK를 사용하여 엔터프라이즈 이메일, 캘린더, 연락처 같은 완벽한 온라인 협업 슈트를 개발했다. AjaxTK는 웹 기반 애플리케이션과 표준 데스크탑 기반의 애플리케이션간 반응성 차이를 거의 좁혔다. 그림 3은 Zimbra의 Collaboration Suite에 포함된 메일 애플리케이션이다. AjaxTK를 사용하여 개발되었다.


그림 3. Zimbra의 메일 애플리케이션
Zimbra's mail application

그림 4는 Zimbra의 캘린더 애플리케이션이다. 이것 역시 AjaxTK에서 개발되었다.


그림 4. Zimbra의 캘린더 애플리케이션
Zimbra's calendar application

이러한 인상적인 Collaboration Suite를 개발하기 위해 기업 내에서 사용된 같은 Ajax 툴을 공공에도 사용할 수 있다. Ajax 개발을 위한 개방 및 비상용 환경의 강점을 공공에도 허용이 된 것이다.

AjaxTK는 다음과 같은 소스 패키지 상에서 구현된다.

  • config -- 설정 정보 및 메시지 로컬화 파일
  • core -- 기본 예외 클래스 및 환경 정보
  • debug -- 런타임 애플리케이션 디버깅을 위한 디버그 클래스
  • dwt -- DHTML Widget Toolkit:
    • config -- CSS 규칙, 이미지, 로컬화 텍스트
    • core -- 예외 핸들링과 저급 DOM 유틸리티 기능
    • dnd -- 드래그&드롭 지원
    • events -- 툴킷에 의해 사용되고 일반적인 AjaxTK 이벤트 지원으로 구현되는 다양한 이벤트
    • graphics -- 점, 직사각형, CSS 유틸리티
    • widgets -- DWT 위젯 세트와 지원 클래스
    • xforms -- 복잡한 형식을 만드는데 필요한 XForms 구현
  • events -- 베이스 이벤트와 이벤트 리스너 클래스, 이벤트 등록과 디스패치를 담당하는 이벤트 매니저 클래스
  • net -- 네트워크 통신
  • soap -- SOAP 문서 핸들링
  • util -- 스트링 조작, 쿠키 관리, 데이터 조작, 지연 액션 지원, 콜백 지원 같은 태스크를 위한 유틸리티 클래스
  • xml -- XML 문서 핸들링

엔터프라이즈 개발자들은 Zimbra Ajax Toolkit이 실제로 크고 강력한 애플리케이션을 구현하는데 사용되었다는 것을 알고 있다. Zimbra의 Collaboration Suite에는 130,000 줄 이상이 되는 JavaScript가 포함되어 있다. AjaxTK는 데스크탑 애플리케이션의 완벽한 대체품을 개발할 계획을 세우고 있다. 기존 웹 페이지를 Ajax로 향상시키고 싶다면 Dojo가 더 알맞다. 선택은 여러분이 무엇을 하고자 하는가에 달려있다.

AjaxTK가 Eclipse에 플러그인 되면서 트리, 버튼, 리스트 같은 풍부한 UI를 개발하는데 필요한 컴포넌트들이 보다 구현하기 쉽고 빨라졌다. Eclipse와의 통합으로 향상된 기능들이 테이블에 추가되었다. 강력한 디버깅 툴과 드래그&드롭 구성은 물론이다. Zimbra는 계속해서 Open Ajax Initiative의 멤버들과 협업하고 오픈, 비상용 기술을 지원하여 Ajax를 운용할 예정이다.




위로


미래 지향의 이니셔티브

Ajax의 채택으로 웹이 새로운 레벨의 인터랙팅과 반응성을 이룩하였기 때문에 엔터프라이즈 급의 개발 툴의 중요성은 점점 커질 것이다. ATF, Dojo, Zimbra는 이러한 향상의 핵심 컴포넌트이다. 웹 사용자들이 더 좋고 빠르고 부드러운 웹 애플리케이션을 요구하면서 툴킷 개발자와 브라우저 제조자에게는 부담이 더해졌다. UI 및 크로스 플랫폼 호환성도 향상시켜야 하는 부담도 안고 있다. Open Ajax Initiative는 그러한 목적에 잘 부합되는 프레임웍이라 할 수 있다.

Open Ajax Initiative는 발전하고 있고 ATF도 살아나면서 본 시리즈 역시 계속될 것이다. Eclipse에 Ajax 애플리케이션을 구현하는 방법에 대한 상세와 튜토리얼을 제공할 것이다.

감사의 말

이 글에 도움을 준 Alex Russell (Dojo Foundation 창립자 겸 회장), Ross Dargahi (Zimbra 공동 창립자 겸 엔지니어링 부회장), John Robb (Zimbra 마케팅 및 제품 관리 부회장)에게 특별한 감사의 말을 전한다.

기사의 원문보기

이 게시물을
목록
번호 제목 글쓴이 날짜 조회 수
» Eclipse의 Ajax Toolkit Framework에서 지원되는 툴 (한글) 황제낙엽 2007.03.03 54
17 MyEclipse 유저 가이드 황제낙엽 2007.01.31 8
16 MyEclipse을 활용한 효율적인 개발 방법 2차 황제낙엽 2007.01.30 81
15 Eclipse을 활용한 효율적인 개발 방법 1차 황제낙엽 2007.01.30 22
14 이클립스 다국어 설정 (UTF-8) file 황제낙엽 2006.09.20 280
13 Web Tools Platform 0.7 - Web 개발하기 개요 황제낙엽 2006.10.04 31
12 이클립스와 Struts 환경셋팅 황제낙엽 2005.09.07 12
11 Eclipse를 활용한 효율적인 팀 개발 및 배포 전략 (2) 황제낙엽 2007.03.16 91
10 Eclipse를 활용한 효율적인 팀 개발 및 배포 전략 (1) 황제낙엽 2007.03.16 120
9 java.net과 이클립스를 이용한 오픈소스 자바 어플리케이션 개발 (2부. 이클립스와 CVS를 이용한 팀 작업) file 황제낙엽 2007.02.28 152
8 java.net과 이클립스를 이용한 오픈소스 자바 어플리케이션 개발 (1부. 이클립스에서 새로운 프로젝트 생성하기) file 황제낙엽 2007.02.28 254
7 MyEclipse에서 XML, JSP 페이지의 실시간 Validation 옵션 끄기 황제낙엽 2007.01.26 156
6 Eclipse Loader 황제낙엽 2005.10.28 19
5 (KeepResident Eclipse plugin) 하드스와핑이 일어나지 않게 황제낙엽 2006.02.14 22
4 Velocity 용 플러그인 황제낙엽 2005.12.05 11
3 Log4J 용 이클립스 플러그인 (log4e) 황제낙엽 2005.11.30 29
2 이클립스3.1용 문서 에디터 플러그인 (JSP, XML, HTML) 황제낙엽 2005.11.30 35
1 Eclipse 관련 FAQ 황제낙엽 2005.10.13 188
쓰기 태그