Eclipse용 Ajax Toolkit Framework (한글)

난이도 : 중급

Tim McIntire, Consultant, Freelance Writer

2007 년 6 월 26 일

Ajax Toolkit Framework (ATF)은 Eclipse Foundation을 통해 강력한 웹 프로그래밍 기술에 대한 접근성을 높이고자 만들어진 새로운 Open Ajax initiative의 핵심입니다. ATF는 Dojo, Zimbra, Rico 같은 다양한 오픈 소스 Ajax 툴 키트용 Asynchronous JavaScript and XML (Ajax) 개발 환경을 추가함으로써 기존 Eclipse Web Tools Platform (WTP)을 확장했습니다. 이 글에서는 HelloWorld 예제를 통해 ATF를 설치 및 구성하는 방법과 Eclipse와 Dojo를 사용하여 기본적인 웹 애플리케이션을 만드는 방법을 설명합니다.

소셜 북마크 mar.gar.in Digg del.icio.us Slashdot

본 글은 2006년 5월에 기고(6월 번역)했던 "Eclipse의 Ajax Toolkit Framework에서 지원되는 툴"의 후속 글이다. (참고자료). 이후, 이 프로젝트는 alphaWorks 버전을 넘어 V0.1을 발표했다.

ATF는 웹 개발 커뮤니티에서 광범위하게 사용되고 있는 Eclipse WTP의 정상에 섰다. WTP는 Java™ 2 Platform, Enterprise Edition (J2EE) 웹 애플리케이션 개발용 툴을 추가함으로써 Eclipse를 확장했다.

ATF는 Dojo, Zimbra, Rico 같은 다양한 오픈 소스 Ajax 툴 키트용 Ajax 개발 환경을 추가함으로써 WTP를 확장했다. JavaScript 편집 기능을 강화했으며, 편집 시 신택스 체크 기능, Document Object Model (DOM)과 Cascading Style Sheets (CSS) Inspectors, 통합 Mozilla 브라우저를 제공한다. ATF를 사용하면 엔터프라이즈 급 통합 개발 환경(IDE)으로서 Eclipse를 사용할 수 있다. ATF를 뒷받침 하는 Open Ajax 보통의 목표는 Ajax로의 접근성을 높이는 것이지만, 신규 개발자들에게는 모호한 부분도 있다.

이 글에서는 ATF의 설치 단계를 설명하고, Eclipse, ATF, Dojo를 사용하여 Ajax 애플리케이션도 만들 것이다. "Eclipse의 Ajax Toolkit Framework에서 지원되는 툴"에서는 Dojo와 Zimbra를 소개했고, ATF를 사용하여 Dojo를 Eclipse에 통합하기 전에 HelloWorld 예제를 설명했다. 이 글은 V0.1 릴리스를 활용하여 이와 비슷한 프로젝트를 보다 쉽게 만들어 볼 것이다.

ATF 설치하기

Microsoft® Windows®에 설치하는 과정이다. (참고자료) Eclipse를 아직 사용하고 있지 않다면, J2EE 프로젝트 번들을 다운로드 하라. 여기에는 Core Eclipse V3.2.1과 Eclipse WTP가 포함되어 있다. (WTP는 ATF를 사용해야 한다.) Eclipse를 설치하여 사용해 본 적이 없는 사람들을 위해 ATF의 기본적인 요구 사항들을 소개하겠다.

ATF에서 시작하기:

1. Eclipse.org에서 최신 버전의 ATF를 다운로드 한다. 이 글은 V0.1 릴리스 (0.1-20060912) 기반이다. 모든 필요한 컴포넌트들을 다운로드 하여 설치해야 한다.
2. 현재 V0.1 릴리스에 필요한 Java Runtime Environment (JRE) V1.4.2를 다운로드 하라. Sun Microsystems 또는 IBM® 버전도 잘 작동한다.
3. Apache Tomcat V5를 다운로드 하여 로컬 웹 서버와 XULRunner로서 사용한다. Eclipse가 Mozilla와 상호 작동하는 것을 돕는다. (참고자료).
4. XULRunner, JRE, Tomcat V5를 설치한다.

   주: Tomcat V5는 JRE V5를 선호하므로 이것을 다운로드 하기 바란다.

5. Eclipse가 시스템에 아직 설치되어 있지 않다면 Eclipse를 설치한다.

Eclipse를 설치했다면, ATF를 설치할 준비가 된 것이다. 상세한 설치 방법은 참고자료를 참조하라.

Eclipse에 ATF를 설치하려면 Eclipse를 열고 Help > Software Updates > Find and Install > Search for New Features to Install > New Archived Site를 클릭한다. 그리고 나서, ATF를 포함하고 있는 압축 파일을 선택한다. 두 개의 설치 화면이 나오면 반드시 모든 ATF 컴포넌트들을 선택해야 한다. ATF Download 정보를 주의 깊게 읽기 바란다. 일부 ATF 릴리스(V0.1 포함)에는 추가 파일의 설치를 설명하고 있는 끝 부분에 특별한 설치 노트가 있다.

위로

ATF에 Dojo 애플리케이션 구현하기

여러분의 첫 번째 Dojo 애플리케이션을 구현할 준비가 되었다. 새로운 프로젝트부터 만든다. 참고자료 섹션에는 이 과정의 초기 단계를 설명하는 플래시 영상이 있다. 물론 이 부분을 건너뛰어서 바로 HelloWorld 애플리케이션을 만들어도 된다. 새로운 프로젝트가 열리면 다음과 같이 한다.

1. Eclipse를 열고 File > New > Project를 클릭한다.
2. Web > Static Web Project를 클릭하고 Next를 클릭한다.
   
   그림 1. 프로젝트 유형 선택하기
   
   
   
3. Project name 필드에 HelloWorld를 입력하고 Target Runtime 밑에 New를 클릭한다. 이 이름은 전체 프로젝트의 대표 이름이 될 것이다. 이곳에서 하위 폴더들과 여러분이 선택한 이름을 가진 웹 애플리케이션을 포함시킬 수 있다.
   
   그림 2. 프로젝트 이름 짓기
   
   
   
4. HTTP > HTTP Server를 클릭한 다음 Next를 클릭한다. 이 단계에서, 대상 런타임 목적지로 로컬 HTTP 서버를 사용할 것임을 Eclipse에 알려준다. 설치 단계 동안 Tomcat V5 (또는 기타 지원되는 HTTP 서버)를 설치해야 하기 때문이다. 이렇게 하면 Eclipse 내에서 애플리케이션 작동을 로컬에서 분석할 수 있다.
   
   그림 3. 로컬 HTTP 서버에 대한 링크 설정
   
   
   
5. 로컬 HTTP 서버용 포트(80 또는 8080)를 입력하고 애플리케이션에 사용할 디렉토리 이름을 입력한다.
6. Publish Projects to this Server를 선택하고 Browse를 클릭하여 로컬 웹 디렉토리를 선택한다. 필자의 경우, 시스템 경로는 C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps\ROOT\helloworld이다. helloworld 디렉토리를 만들어야 할 것 같지만, 상위 디렉토리들이 이미 존재한다.
7. Finish를 클릭한다.
   
   그림 4. 로컬 HTTP 디렉토리 설정하기
   
   
   
8. Next를 클릭하고 ATF > Dojo를 클릭한다.
9. Rico 체크박스를 비우고 Finish를 클릭한다. 이로써 Dojo Toolkit을 사용하여 Ajax 애플리케이션을 개발하는데 필요한 요구 사항들로 프로젝트 설정을 마쳤다.
   
   그림 5. Dojo Toolkit 실행하기
   
   
   

전 단계는 Eclipse에 Dojo 프로젝트의 뼈대를 만든 것이다. 이제는 애플리케이션을 만들어야 한다.

애플리케이션 만들기

Navigator에서, HelloWorld를 확장한다. WebContent를 오른쪽 클릭하고 New > Other를 클릭한다.

그림 6. 새로운 웹 콘텐트 만들기

Dojo를 확장하고 Dojo Application > Next를 클릭한다. 위 단계에서는 애플리케이션용 프레임웍을 설정하는 것이지만, 이 단계는 실제로 프로젝트 내에서 하나의 Dojo 애플리케이션에 대한 편집 및 빌드 프로세스에 사용하게 될 파일을 만드는 단계이다. 하나의 프로젝트에 많은 애플리케이션들을 만들 수 있다.

그림 7. Dojo 애플리케이션 만들기

Name 필드에 helloworldapp을 입력하고 Finish를 클릭한다. 각 애플리케이션 이름은 프로젝트 이름과는 달라야 한다.

그림 8. Dojo 애플리케이션 이름 정하기

이 단계에서는 Eclipse의 중앙 프레임에 helloworldapp.html을 로딩한다. 이 프레임에서, helloworldapp.html을 편집하여 골격 애플리케이션에서 실행 HelloWorld 애플리케이션으로 변경한다.

그림 9. 편집 창

HelloWorld 애플리케이션 만들기

타이틀을 Hello World로 바꾼다. 이는 정식 HTML 파일로서, Dojo와 Dojo 위젯을 사용하는 JavaScript 코드를 포함하고 있으며, 여러분이 사용해오던 것과 같은 신택스와 HTML을 지원한다.

그림 10. HTML을 변경하여 관련 프로젝트 이름 포함하기

예제에서도 사용되었지만, 이 경우 애플리케이션용 프레임웍은 Eclipse에서 설정되었다. helloworldapp.html 코드의 head 섹션의 끝에 이 스크립트를 삽입한다. 이 코드 조각을 사용하여, "Hello World!"를 디버그 창에 작성하기 위해 사용자가 누를 수 있는 버튼을 만든다.

그림 11. Button 위젯을 코드에 추가하기

마지막으로, body 섹션의 위에 사용자의 스크린에 실제로 버튼을 설치할 코드를 추가한다. 여러분은 이미 Dojo Button 위젯을 로딩했기 때문에 HTML 바디에 의해 참조될 수 있다. 이는 사용자 인터랙션 없이 문장을 프린트 하는 전형적인 HelloWorld 애플리케이션 보다는 고급이다. 디버그를 위해 메시지가 프린트 된다.

그림 12. 실제 버튼을 콘텐트 영역에 추가하기

애플리케이션 저장, 컴파일, 실행

이제는, HelloWorld 애플리케이션을 저장, 컴파일, 실행할 차례이다.

1. File > Save를 클릭한다.
2. Eclipse의 Navigator 프레임에서 HelloWorld, WebContent, helloworldapp을 확장한다.
3. helloworldapp.html을 오른쪽 클릭하고, Run As > Run in Mozilla를 클릭한다.
4. Finish를 클릭하여 HelloWorld 애플리케이션을 실행하는 통합 Mozilla 브라우저를 가져온다.
   
   그림 13. Dojo 애플리케이션의 아웃풋 검사하기
   
   
   

Press Me를 클릭하면 디버그 콘솔에 "Hello World!"가 프린트 되는 것을 볼 수 있다. 다른 메시지 없이 올바르게 프린트 된다면 ATF 설치와 프로젝트 코드가 올바르게 실행된 것으로 보면 된다.

그림 14. 버튼 시험하기

애플리케이션의 기능 확장하기

이제 기본적인 애플리케이션이 생겼으므로, ATF에 추가된 코드 조각을 활용하여 기능을 확장시켜 보자. Eclipse 뷰에 Snippets 작은창이 없다면, Window > Show View > Other를 클릭한다. General을 확장하고 Snippets와 OK를 클릭한다. 이 Snippets 작은창은 Eclipse 윈도우의 오른쪽에 나타나야 한다.

그림 15. 미리 만들어진 코드 조각

Snippets 작은창에 Dojo를 확장하고, dojo.require를 helloworldapp.html 편집 창에 JavaScript 블록으로 가져온다. 패키지 이름을 묻는 다이얼로그가 나타난다. 이 경우, dojo.widget.Tree를 입력한다. 이렇게 하면 Tree 위젯을 로딩하는 라인이 추가되며, 여러분은 코드의 콘텐트 영역에 이 위젯을 사용할 수 있다.

그림 16. Tree 위젯 로딩하기

helloworldapp.html의 바디 섹션에서 스크롤을 내려서, Snippet 페인에서 편집 창으로 Tree를 끌어온다. Eclipse는 샘플 데이터를 포함시킬 것인지 여부를 묻는다. 체크박스를 비워서 인클로징 Tree 코드가 추가되도록 한다. 그런 다음, Tree 태그 내에서, Snippet 페인에서 편집 페인으로 Tree Node Snippet을 가져오고 노드 이름을 Hello로 짓는다. Hello 노드 내부에 Tree 노드가 세 개 더 생긴다.

그림 17. HelloWorld 데이터로 Tree 노드 만들기

다시 한번, 지금까지 만들었던 HelloWorld 애플리케이션을 저장, 컴파일, 실행한다. File > Save를 클릭한다. Eclipse의 Navigator 프레임에서 HelloWorld, WebContent, helloworldapp을 확장한다. helloworldapp.html을 오른쪽 클릭하여 Run As > Run in Mozilla를 클릭한다. Finish를 클릭하면 HelloWorld 애플리케이션을 실행하는 통합 Mozilla 브라우저가 나타난다. Hello 노드를 확장 및 수축할 때 클릭을 사용할 수 있다.

위로

결론

Eclipse의 ATF를 사용하여 Dojo 프로젝트의 컴포넌트를 생성하는 방법을 배웠다. 고급 사용자가 되려면, Eclipse 내에서 사용할 Ajax 툴 키트에 대해 배워야 한다. 또한, DOM Inspector, CSS Inspector, JavaScript 디버거 같은 Eclipse ATF에서 사용할 고급 기능들을 배워야 한다. Dojo를 사용하여 HelloWorld 애플리케이션을 구현하기는 Eclipse를 사용하면 간단하고, 프로젝트가 점점 복잡해 질수록 더욱 완벽한 기능을 갖춘 웹 애플리케이션을 구현할 수 있다. 후속 기술자료에서는 새로운 릴리스의 기능과 특징을 설명하고 ATF의 컴포넌트와 Zimbra와 Rico 같은 기타 지원 툴 키트를 설명하도록 하겠다.

참고자료

교육

• "Tech Titans Contribute Browser-Boosting Ajax Technologies to Open Source Community": Open Ajax 이니셔티브.
  
  
• Eclipse.org: Eclipse IDE.
  
  
• "Eclipse의 Ajax Toolkit Framework에서 지원되는 툴 (한글)": ATF.
  
  
• 플래시 무비 Dojo Project Cycle Demo: Ajax로 Dojo 프로젝트 만들기.
  
  
• Dojo Toolkit documentation: Dojo 관련 정보.
  
  
• JotSpot wiki: 상세한 HelloWorld 예제.
  
  
• "Eclipse Platform 시작하기 (한글)": Eclipse 플랫폼 소개.
  
  
• 한국 IBM developerWorks' Eclipse 프로젝트 리소스 (한글): Eclipse 리소스.
  
  
• developerWorks 기술 이벤트와 웹 캐스트.
  
  
• IBM 오픈 소스 개발자를 위한 컨퍼런스, 트레이드 쇼, 웹 캐스트, 이벤트.
  
  
• 한국 developerWorks 오픈 소스 존: 오픈 소스 기술 관련 how-to 정보, 툴, 프로젝트 업데이트.
  
  
• developerWorks podcasts.
  
  

제품 및 기술 얻기

• ATF 프로젝트.
  
  
• Eclipse WTP Project.
  
  
• Eclipse Callisto bundle 다운로드.
  
  
• Eclipse에서 ATF 최신 버전 다운로드.
  
  
• JRE 다운로드.
  
  
• Apache Tomcat V5 다운로드.
  
  
• 최신 Eclipse 다운로드(IBM alphaWorks)
  
  
• IBM SW 시험판: 다운로드 및 DVD.
  
  

토론

• Eclipse 뉴스그룹.
  
  
• developerWorks 블로그 참여하기.