IBM WebSphere Portlet Factory V6.0.1에서 새로운 Ajax 기능 활용하기 (한글)

문서 옵션 JavaScript가 필요한 문서 옵션은 디스플레이되지 않습니다. 토론 샘플 코드 영어원문  제안 및 의견 피드백

난이도 : 중급

Stephen Cooke, Advisory I/T Specialist, IBM　
Abhishek Singh, Senior IT Specialist, IBM

2008 년 1 월 15 일

IBM WebSphere Portlet Factory는 개발 속도를 높일 수 있는 툴 세트를 제공합니다. 빌더를 사용하여 Ajax 기능을 포틀릿에 추가하는 과정을 단순화 할 수 있습니다. 샘플 포틀릿 애플리케이션을 통해 배워봅시다.

IBM WebSphere Portlet Factory V6.0.1은 WebSphere 개발자에게 개발 속도를 높일 수 있는 툴 세트를 제공한다. 새 버전의 제품은 추가 빌더를 제공하는데, 확장된 웹 기능을 작업에 통합하는 부분을 단순화 하도록 설계되었다. 최신 버전의 WebSphere Portlet Factory V6.0.1은 Ajax 기반 기능의 추가를 단순화 하는데 사용할 수 있는 빌더를 제공한다. 이 글에서는 이 새로운 빌더들을 소개하고, 샘플 포틀릿 애플리케이션을 통해 사용법을 설명한다. Eclipse나 IBM Rational Application Developer for WebSphere Software 내에서 WebSphere Portlet Factory를 사용하여 포틀릿을 구현하는 것을 잘 이해할 수 있을 것이다.

WebSphere Portlet Factory는 포틀릿 개발을 위한 Rapid Application Development 툴 세트를 제공한다. 이 새로운 빌더를 사용하여 Ajax 및 Dojo 기반 기능을 모델에 추가할 수 있다. 이러한 빌더들은 포틀릿 안에서 객체들을 드래그& 드롭 하기, 포틀릿 페이지 뷰의 인라인 편집, 페이지의 특정 부분을 마우스가 지나갈 때 추가 데이터를 디스플레이 하는 오버레이 또는 팝업 창 같은 풍성한 사용자 인터페이스를 지원한다.

이 글에서는 Ajax와 Dojo의 기본 개념과, 웹 애플리케이션에서 갖는 효능을 설명한다. 새로운 WebSphere Portlet Factory 빌더를 통합하는 방법을, 샘플 뮤직 스토어 포틀릿 애플리케이션에 추가하는 과정을 통해 설명하겠다.

Ajax 개요

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

웹 개발은 처음에는 정적인 웹 페이지들을 작성하는 것이었는데, 이것은 GET와 POST 폼 액션을 활용하여 전체 페이지 콘텐트를 웹 서버에 제출하는 웹 페이지로 진화하였다. 이러한 변화로 인해 사용자는 서버가 사용자 이벤트를 처리하고, 업데이트 된 페이지로 응답할 때까지 기다려야 했다. Ajax는 사용자가 웹 페이지의 데이터 부분들을 서버에 보내고 받는 것을 비동기식으로 처리할 수 있도록 해준다. 브라우저는 사용자 이벤트에 응답할 수 있고, 원격 웹 서버로의 라운드트립을 사용한 전체 페이지 리프레시 없이 서버 기반 데이터를 사용하여 페이지의 일부분만 업데이트 할 수 있다. 성능은 향상되었고, 사용자는 다른 페이지 연산을 수행하면서, 페이지 업데이트를 기다리는 필요성이 줄어들었다.

Ajax는 기존의 여러 가지 웹 기반 기술을 활용한다:

• DHTML
• JavaScript
• XML
• XSL
• Document Object Model (DOM)

컴포넌트 기술들은 그 동안 사용할 수 없었던 것을 제공하는 것은 아니다. Ajax는 XMLHttpRequest로 알려진 클라이언트 측 DOM에서 제공하는 기능을 통합함으로써 이러한 컴포넌트를 모은다. WebSphere Portlet Factory V6.0.1은 새로운 Ajax 및 Dojo 기반 빌더를 추가함으로써 이러한 기능들을 WebSphere 애플리케이션에 추가하는 과정을 단순화 한다.

위로

Dojo 개요

웹 페이지에서 Ajax를 실행하려면, JavaScript 코드를 작성해야 한다. JavaScript는 언제나 일관성 없는 브라우저 지원 같은 문제가 있었다. 새로운 프레임웍은 이러한 한계를 극복했다. 이 중 하나가 Dojo 오픈 소스 JavaScript 툴킷이다.

Dojo는 강력한 JavaScript 라이브러리로서, 사용하기 쉬운 API를 제공한다. 이 API를 사용하여 수 많은 기능들을 보다 쉽게 구현할 수 있다. Dojo를 사용하면 이벤트 핸들링 같은 반복적인 태스크를 위해 JavaScript 라이브러리를 제공하기 때문에 일반적인 JavaScript 함수들을 작성할 필요가 없다. Dojo는 또한 다양한 브라우저들의 Ajax에 대한 일관성 없는 지원을 극복했고, JavaScript를 병들게 했던 메모리 누수도 극복했다. 게다가 Dojo는 XMLHttpRequest 메커니즘을 지원하여, 여러분이 직접 이러한 문제를 다루지 않게끔 하였다. Dojo는 스트링과 Document Object Model 조작을 위한 패키지, 드래그&드롭 지원, 리스트, 큐, 스택 같은 복잡한 데이터 구조를 제공한다.

위로

샘플 애플리케이션 개요

Ajax 빌더 이 글에서는 WebSphere Portlet Factory V6.0.1에 도입된 Ajax 빌더를 설명한다: Ajax Region builder Ajax Type-Ahead builder Ajax Highlighter builder

Music Store 애플리케이션은 다음과 같은 컴포넌트들로 구성된다:

앨범 리스팅 포틀릿

이 포틀릿은 사용자에게 Album List 페이지 뷰와 Search Album Catalog 페이지 뷰를 제공한다. Album List 페이지 뷰는 전체 뮤직 카탈로그 또는 제목 또는 아티스트 별 검색 결과를 디스플레이 한다. Album List 페이지의 Image 컬럼은 Dojo Drag and Drop Source로서 작동한다. Albums Listing의 포틀릿은 그림 1과 같다.

Albums Listing 포틀릿은 또한, Search Albums Catalog 페이지 뷰도 제공한다. Search Value 편집 필드는 Search By에 적합한 데이터를 사용하는 Ajax type-ahead를 지원한다.

Albums Cart 포틀릿

이 포틀릿은 Dojo Drag and Drop Target을 제공하는 단일 페이지 뷰로 구성된다. 이 포틀릿은 Albums Listing 포틀릿에서 가져온 앨범 리스트를 모은다. 또한, 디스플레이 된 각 앨범에 대해 Dojo Inline Editor 컨트롤을 동적으로 생성한다. 이 컨트롤은 포틀릿 페이지를 리프레시 할 필요 없이 카트에서 관련 앨범을 제거하는데 사용될 수 있다. 이 포틀릿은 앨범의 총 비용을 디스플레이 한다. (그림 3)

위로

샘플 애플리케이션 만들기

Dojo 빌더 이 글에서는 WebSphere Portlet Factory V6.0.1에 포함된 Dojo 빌더의 사용법을 설명한다: Dojo Drag Source builder Dojo Drag Target builder Dojo Inline Edit builder Dojo Tool Tip builder

이제는, 다양한 Ajax 및 Dojo 기반 빌더를 샘플 포틀릿 애플리케이션에 사용하는 방법을 설명하겠다. 이 애플리케이션은 두 개의 포틀릿으로 구성되며, 뮤직 스토어 개념에 기반하고 있다. 서비스 공급자 모델 역시 두 개의 고객 포틀릿에 데이터를 제공하도록 정의되었다.

WebSphere Portlet Factory 프로젝트 생성하기

WebSphere Portlet Factory V6.0.1은 다음과 같은 개발 IDE를 지원한다:

• IBM Rational Application Developer V6 또는 V7
• Eclipse 3.1 또는 이후 버전

뮤직 스토어 프로젝트를 생성하려면, 다음 단계를 따른다:

1. Eclipse 또는 Rational Application Developer 메뉴에서 Window - Open Perspective - Other를 선택한다.
2. Select Perspective 다이얼로그 박스에 있는 리스트에서 WebSphere Portlet Factory 퍼스펙티브를 선택한다.
3. WebSphere Portlet Factory 퍼스펙티브를 연 후에 File - New - WebSphere Portlet Factory Project를 선택한다.
4. 프로젝트 이름에 대한 프롬프트가 뜨고, 프로젝트에 포함시킬 기능 리스트를 선택해야 한다. 이 애플리케이션은 Dojo Extension 기능 선택이 필요하다. (그림 4)
   
   
   그림 4. Dojo Ajax Extension 지원 추가하기
   
   
   
5. 전개 설정에 대한 프롬프트가 뜬다. 테스팅 환경과 관련한 상세를 입력한다. 서버에서 바로 개발 변경 사항을 실행하려면 Auto Deploy 옵션을 선택한다.
6. New Project 마법사가 요청을 처리하면서, 다음을 묻는 프롬프트를 보게 된다:
   
   Would you like to add the following jars from the Feature Set to the project Java build path?
WEB-INF/work/lib/dojo_builder.jar
WEB-INF/work/lib/dojo_builders_nl1.jar
Click Yes.


서비스 공급자

이 프로젝트에서 정의된 첫 번째 모델은 MusicStoreProvider이다. 이것은 고객 포틀릿에 의해 공개된 서비스 연산을 통해 쿼리된 아티스트, 앨범, 노래 제목을 정의하여 다양한 포틀릿 사용자 인터페이스 엘리먼트와 관련된 데이터를 가져온다. 각 서비스 연산은 Service Definition 빌더와 제휴되고, Action List 또는 Method 빌더로 매핑되어 Music Store 고객 포틀릿에 의해 요청된 데이터를 리턴한다. Variable 빌더에서 기인한 각 서비스 연산에 의해 리턴된 데이터는 공급자 모델 내에서는 독립적이며, 읽기 전용이다. MusicStoreProvider 모델에 정의된 Dojo 또는 Ajax 기반 빌더가 있다. 다음은 MusicStoreProvider 모델에 의해 정의된 서비스 연산 리스트 및 간단한 설명이다.

• getAlbumsList. getAlbumsList 서비스 연산은 제공된 검색 기준에 기반하여 앨범 리스트를 리턴한다. 이 연산은 두 개의 인자, searchParameter와 searchValue를 취한다. searchParameter 인자는 검색이 아티스트와 앨범 제목 중 어떤 것에 기반하는 것인지를 정의한다. searchValue 인자는 searchParameter 필드 데이터 내에서 검색하는 값을 구분한다. 두 인자 모두 무효라면, 이 메소드는 전체 앨범 리스팅을 리턴한다.
• getTracksForAlbum. 이 서비스 연산이 호출되면 getTracksForAlbum 액션 리스트를 호출하여 해당 앨범에 대한 트랙 리스트를 리턴한다.
• getAlbumDetails. 이 서비스 연산이 호출되면, 제목, 가격, 장르 같은 앨범에 대한 애트리뷰트 세트를 리턴한다. 이 서비스 연산은 Albums Cart 포틀릿에 의해 사용되어 앨범 상세를 카트에 추가한다.
• getSearchValues. 이 서비스 연산은 Album List 포틀릿에 의해 호출되어 검색하는 아티스트 리스트 또는 제목 리스트를 얻는다. getSearchValues Method 빌더를 호출하고, 제목 또는 아티스트를 검색할 것인지를 구별하는 인풋을 수락한다.

서비스 소비자

Music Store는 두 개의 서비스 소비자 포틀릿, Albums Listing 포틀릿과 Albums Cart 포틀릿을 생성해야 한다. 다음은 각각에 대한 설명이다:

• Albums Listing 포틀릿. 이 포틀릿은 앨범 리스팅을 제공한다. 전체 앨범 리스팅 또는 제목 또는 아티스트로 검색한 결과를 디스플레이 한다.
• Albums Cart 포틀릿. 이 포틀릿은 사야 할 앨범 리스트를 모으는데 사용하는 앨범 카트 기능을 실행한다.

Albums Listing 포틀릿 만들기

Albums Listing 모델을 만들려면, 다음 단계를 따른다:

1. File - New - WebSphere Portlet Factory Model을 선택한다. 이전에 생성된 WebSphere Portlet Factory Project를 선택하여 각 모델을 프로젝트와 연결시킨다. 각각에 대해 빈 모델을 선택하고 Next를 클릭한다. (그림 5)
   
   
   그림 5. 빈 모델 생성하기
   
   
   
2. WebSphere Portlet Factory 프로젝트를 선택하여 새로운 모델과 제휴시킨다. 이전에 생성된 프로젝트를 선택하고 Next 버튼을 클릭한다.
3. Service Consumer 빌더를 모델에 추가하여 MusicStoreProvider 모델에 의해 생성된 서비스에 액세스 한다. 다음 설정을 사용한다:
   
   
   • Provider Model 필드에서, musicstore/data/MusicStoreProvider를 입력한다.
   • "Add All Provider Operations" 옵션을 선택한다.
   • 빌더에서 Apply 버튼을 클릭한다.
4. Portlet Adapter 빌더를 추가하여 포틀릿 지원을 모델에 추가한다. Portlet Title 빌더 인풋은 포털 서버에 포틀릿의 이름을 정의한다. (그림 6)
   
   
   그림 6. Portlet Adapter 빌더가 전개 지원을 포털에 추가한다.
   
   
   
5. Action List 빌더를 추가하고(그림 7), Name 빌더 인풋을 main으로 설정한다. 이것은 포틀릿이 페이지에서 실행될 때 호출되는 첫 번째 빌더이다. 다음 단계에서 main을 위해 Actions 빌더 인풋을 추가한다.
   
   
   그림 7. Albums Listing 포틀릿의 메인 액션 리스트
   
   
   

Album List 페이지 만들기

Album List 페이지를 만들려면, 다음 단계를 따른다:

1. Page 빌더를 Albums Listing 포틀릿에 추가하고, albumsListPage로 명한다.
2. Listing 1의 HTML을 Page Contents 빌더 인풋에 붙인다.

<html>
   <span name="stylesheet"></span>
    <body>
        <!-- As a best practice, change the form name to a unique name -->
        <form name="myForm" method="post">
            <div align="center">
            		<span name="namedTag" style="font:12pt Arial;
            		font-weight: bold;color: #336699;">Albums Catalog</span>
               		<span name="albumnsList"></span>
            		<br>
            		<span name="searchButton" /><span name="completeListing" />
            </div>
        </form>
    </body>
</html>

3. getAlbumListing 이라고 하는 또 다른 Action List 빌더를 추가한다. 이 액션은 서비스 공급자로 호출하여 앨범 리스팅을 얻는다. getAlbumListing 서비스 연산은 무효 값을 두 매개변수에 제공하면 전체 앨범 리스팅을 리턴한다. 액션 리스트의 경우, searchParameter와 searchValue 매개변수를 무효로 설정하고, getAlbumsList 서비스 연산을 호출한다. getAlbumsList의 Actions 빌더 인풋을 albumsListPage로의 호출로 끝내고 결과를 렌더링 한다. 설정은 다음과 같다:
   
   
   • Under Properties, in the Name field, getAlbumListing
   • Under Arguments, in the Return Type field, Object, and in the Actions field, the following entries under ActionList:
     Assignment!Variables/ServiceConsumerGetAlbumsListInputs/arguments/searchParameter=
     Assignment!Variables/ServiceConsumerGetAlbumsListInputs/arguments/searchValue=
     DataServices/ServiceConsumer/getAlbumList
     albumsListPage
4. OK를 클릭하거나, getAlbumListing Action List 빌더에 적용한다.
5. getAlbumListing Action List 빌더를 모델에 추가한 후에, 이전에 생성된 메인 Action List 빌더를 닫고 다시 열고, 메인 Actions 빌더 인풋에 있는 getAlbumListing에 호출을 추가한다. 다음과 같이 설정한다:
   
   
   • Name 필드에 main을 입력한다.
   • Return Type 필드에, Object를 입력한다.
   • ActionList 밑에 있는 Actions 필드에, getAlbumListing을 입력한다.
6. Data Page 빌더 호출을 추가하여 getAlbumsList 서비스 연산 결과를 디스플레이 한다. 이것은 모든 앨범의 초기 디스플레이와 제목 또는 아티스트 별 앨범 검색 결과를 디스플레이 한다. Data Page 빌더 호출을 설정하여 데이터를 이전에 생성된 albumListPage의 albumList span 태그에 작성한다. 이 빌더는 getAlbumsList 서비스 연산으로의 호출에 의해 채워진 MusicLibrary 변수를 렌더링 한다. (그림 8)
   
   
   그림 8. albumsListPage를 위한 Data Page 빌더 인풋
   
   
   
7. Image 빌더를 추가하여 이전의 Data Page 빌더를 사용하여 디스플레이 된 앨범 데이터의 왼쪽 컬럼의 디스플레이를 결정한다. 샘플 애플리케이션은 각 앨범의 이미지를 정의한다. 이것은 albumListVar Variable 빌더의 Image 엘리먼트에 있는 데이터를 사용하여 이를 수행한다. 다음과 같이 설정한다:
   
   
   • Name 필드에, albumImage를 입력한다.
   • Page 필드에 있는 Page Location 아래에, albumsListPage를 입력한다.
   • Tag 필드의 Page Location 아래에, Image를 입력한다.
   • Image Source 필드에, ${VariablesAlbumLoopVar/Album/Image}를 입력한다.
   
   
   그림 9. Image 빌더 인풋
   
   
   
8. 다음에는, 두 개의 Button 빌더를 페이지에 추가하여 albumListPage의 searchButton 과 completeListing span 태그에 각각 Search Albums와 Get Complete Listing 기능을 제공한다. 이 빌더 인풋에 대해서는 다운로드 섹션에 있는 샘플 코드를 참조하라.
9. Complete Listing 버튼의 Actions 인풋을 getCompleteListing으로 설정한다. Search Albums Button 빌더의 Actions 인풋을 당분간은 빈 상태로 둔다. 다운로드 섹션에서 샘플 코드를 참조하라.
10. 메소드를 실행하여 Album List 페이지를 본다. (그림 10)
    
    
    그림 10. Albums List 페이지 아웃풋
    
    
    

위로

Dojo Drag Source 기능 추가하기

Dojo 드래그&드롭 지원을 포틀릿 애플리케이션에 추가하려면 드래그&드롭 소스와 드래그&드롭 대상을 정의해야 한다. 드래그&드롭 소스는 시작점에서 가져온 것이다. 드래그&드롭 대상은 드래그&드롭 소스에서 이벤트를 놓는다. 일반적으로, 메시지는 드래그&드롭 소스에서 드래그&드롭 대상으로 인자의 형태로 전달된다. 드래그&드롭 대상은 인자를 받고, 액션을 수행한다. 그림 11에서, Album Catalog의 Image 컬럼은 Albums Cart의 쇼핑 카트 이미지에 의해 받고 처리될 수 있는 드래그&드롭 소스를 정의한다.

Albums Listing 포틀릿에서 앨범의 이미지를 가져와서, 이것을 Albums Cart의 쇼핑 카트 아이콘에 놓으면 앨범이 앨범 카트에 추가되고, 총액이 업데이트 된다. 이 액션의 결과는 그림 12와 같다.

Albums Listing 포틀릿에 드래그 지원을 추가하려면, Dojo Drag Source 빌더를 albumsListPage의 Image 컬럼에 추가한다. 이것으로 Image 엘리먼트를 통해 각 앨범에 할당된 그래픽이 앨범만의 드래그&드롭 소스 메시지로서 작동한다. 이것을 albumsListPage와 Image의 Page와 Tag 빌더로 할당한다.

또한, ${Variables/AlbumLoopVar/Album/AlbumID}의 Drag Source Data 빌더 인풋과 albumID의 Drag Type을 설정해야 한다. 이러한 빌더 인풋은 드래그 소스가 데이터 중심의 인자를 드롭 대상으로 설정할 수 있도록 한다. 이 경우, Dojo Drag Source 빌더는 Dojo 드롭으로 가져온 이미지와 제휴된 albumID를 전달한다.

Dojo Drag Source 다이얼로그 박스에서, 다음과 같이 설정한다:

• Page location 필드에서, On Named Page를 선택하고, Page 필드에 albumsListPage를, Tag 필드에 Image를 입력한다.
• Drag Source Data 필드에, ${Variables/AlbumLoopVar/Album/AlbumID}를 입력한다.
• Drag Type 필드에, albumID를 입력한다.

Dojo 드롭 대상 지원은 후에 Albums Cart 포틀릿에 추가된다.

Dojo 툴팁 지원 추가하기

WebSphere Portlet Factory Dojo 툴팁 빌더는 마우스오버 기반의 팝업 창을 제공한다. Title 컬럼에 있는 항목에 마우스를 대면 Albums Listing 포틀릿에서 이것을 볼 수 있다. AlbumsList 페이지는 Dojo Tooltip 기반의 팝업 창을 디스플레이 한다. Albums Listing의 Title 컬럼 내에서 마우스를 움직이면 앨범에 대한 트랙 리스팅을 구분한다. (Listing 13)

다음 단계를 따라서 Dojo 기반 툴팁 창을 구현한다:

1. tracksPage Page 페이지 빌더를 Albums Listing 포틀릿에 추가하고, Listing 2의 HTML을 Page Contents 빌더에 제공한다.

<html>
    <body>
        <!-- As a best practice, change the form name to a unique name -->
        <form name="myForm" method="post">
            <div align="center"  bgColor="#809FFF">
            	<span name="tracks"></span>
            </div>
                       
        </form>
    </body>
</html>
tracksPage HTML

2. tracksPage Data Page 빌더를 추가한다. 이 빌더가 GetTracksForAlbum 서비스 연산에 의해 생성된 Tracks 변수의 콘텐트를 디스플레이 하도록 설정한다. 이 빌더는 tracksPage의 tracks 태그에 결과를 놓는다. 이 빌더 호출에 대한 설정은 다음과 같다:
   
   • Name 필드에, tracksPage를 입력한다.
   • Variable 필드에, Variables/ServiceConsumerGetTracksForAlbumResults/Tracks를 입력한다.
   • Model 필드에 있는 Page에, tracksPage를 입력한다.
   • Page Type 필드에, HTML 옵션에서 Infer를 선택한다.
   • "Make UI from Data" 옵션을 선택한다.
   • "Location for New Tags" 필드에서, 트랙을 입력한다.
3. tracksDataColumnModifier Data Column Modifier 빌더를 추가하고, 다음 빌더 인풋을 입력한다:
   
   • Name 필드에, tracksDataColumnModifier를 입력한다.
   • Container Field 필드에, [tracksPage]tracksPage/Tracks/Track을 입력한다.
   • Delete Column Style 필드에, No Delete Column을 입력한다.
   • Manage Columns 옵션을 선택한다.
4. showTracksListingForAlbums Action List 빌더를 추가한다.
5. Arguments Action List 빌더 인풋을 사용하여 빌더에 String 유형의 albumID 인자를 할당한다.
6. Assignment를 Actions 빌더 인풋에 추가하여 Service Consumer 빌더에 의해 정의된 GetTracksForAlbum 서비스 인풋 변수에 대한 albumID 인자를 전달한다.
7. Actions 빌더 인풋을 추가하여 tracksPage Page 빌더를 디스플레이 한다.
   
   showTracksListingForAlbums Action List 빌더 설정은 다음과 같다:
   
   • Name 필드에, showTracksListingForAlbums를 입력한다.
   • Arguments 필드에, 이름으로 albumID를 데이터 유형으로 String을 입력한다.
   • Return Type 필드에, Object를 입력한다.
   • Actions 필드에, 다음 Action List 아이템을 입력한다:
     Assignment/Variables/ServiceConsumerGetTracksForAlbumInputs/arguments/
     albumID=${Arguments/albumID}
     DataServices/ServiceConsumer/getTracksForAlbum
     tracksPage
8. tracksListDojoControl Dojo Tooltip 빌더를 추가한다.
9. Page Location 빌더 인풋을 설정하여 albumsListPage의 Title 태그를 수정한다.
10. Tooltip Type builder input of type Action을 선택한다.
11. Tooltip Action이 1 단계에서 정의된 showTracksListingForAlbums 툴을 호출하도록 설정한다.
    
    Dojo Tooltip 빌더 설정은 다음과 같다:
    
    • Name 필드에, trackListDojoControl을 입력한다.
    • Page Location 섹션에, On Named Tag 옵션을 선택하고, Page 필드에 albumsListPage를, Tag 필드에 Title을 입력한다.
    • Action option for Tooltip Type을 선택한다.
    • TooltipAction 필드에, showTracksListingForAlbums를 입력한다.
    • Input Mapping 필드에서, 이름에 albumID를, 값에는
      ${Variables/AlbumLoopVar/Album/AlbumID}를 입력한다.

주: 이 빌더를 사용할 때, Tooltip Type으로 Text 또는 Action을 선택할 수 있는 옵션이 있다. albumsListPage는 Action ToolTip을 정의한다. Text Tooltip Type은 Variables, DataServices 리턴 값, MethodCall 결과 등을 디스플레이 한다.

이제, Search Albums 페이지 뷰를 Albums Listing 포틀릿에 추가해 보자. 여기에서는 주로 Ajax 관련 디자인 생성물에 초점을 맞춘다. 다운로드 섹션에서 샘플 코드를 참조하라.

searchPage Page 빌더를 추가하는 것으로 시작한다. Listing 3의 HTML을 Page Contents 빌더 인풋에 추가한다.

<html>
   <span name="stylesheet"></span>
    <body>
        <!-- As a best practice, change the form name to a unique name -->
        <form name="myForm" method="post">
            <div align="center">
            	<span name="namedTag" style="font:12pt Arial;font-weight: bold;
            	color: #336699;">Search Albums Catalog</span>
            </div>            
             <div align="left">
             	<span name="searchDialog"
            		<span name="searchCriteria"></span>
             		<span style="width:100px" name="searchButton" /> 
             		<span style="width:100px" name="backButton" />
             	<span>	
            </div> 
        </form>
    </body>
</html>

Ajax Type-Ahead 지원 추가하기

Ajax Type-Ahead 기능으로는 타이핑 하면서 선택할 수 있는 값 리스트를 얻을 수 있다. Albums Listing 포틀릿은 Search Value 편집 필드에 이 작동을 활용하고 있다. Music Store 애플리케이션에서는 사용자가 아티스트나 제목 별로 검색할 수 있다. Ajax Type-Ahead 기능의 데이터는 기준에 의해 선택된 것에 기반한다. Search Value 필드에 입력하면, Search Value 필드에 입력하면 해당 값에 대한 정렬된 리스트를 보여준다. 그림 14에서, Ajax Type-Ahead 빌더는 E로 시작하는 아티스트 검색에 맞는 것을 보여준다.

Ajax Type-Ahead 빌더는 HTML 페이지 내 span 태그에서 연산된다. 여러분은 Lookup Table Used 빌더 인풋을 설정하여 Type-Ahead 데이터를 구분한다. Ajax Type-Ahead 지원을 Music Cart 애플리케이션에 추가하려면 다음 단계를 따른다:

1. searchVar Variable 빌더를 모델에 추가한다. 이 빌더는 검색 매개변수를 정의하는데 사용되는 XML 변수를 만든다.
   
   • Name 필드에, searchVar을 입력한다.
   • Type 필드에, XML을 입력한다.
   • Initial Value 필드에, 다음의 XML을 입력한다:
     <Search>
<SearchBy></SearchBy>
<SearchValue></SearchValue>
</Search>
2. searchDataPage Data Page 빌더를 모델에 추가한다. Page Type 빌더 인풋을 Data Entry로 설정하여, 사용자가 검색 기준을 제공할 수 있도록 한다. Data Page 빌더는 페이지에서 searchVar 빌더를 실행한 결과로서 SearchBy와 SearchValue 태그를 추가한다.
3. searchByLookup Variable 빌더를 모델에 추가한다. 이것은 사용자가 검색할 수 있는 검색 기준 리스트를 정의한다.
4. SearchBy Data Field 변경자를 추가하고, Fields 빌더 인풋을 [searchPage]searchDataPage/Search/SearchBy로 설정한다. 이것은 Data Field 변경자의 범위를 첫 번째 단계에서 정의된 SearchBy 엘리먼트로 설정한다.
5. onChangeSearch HTML Event Action 빌더를 추가하여 이러한 설정을 HTML Event Action 다이얼로그 박스에 제공함으로써 onChangeSearchByAction Action List 빌더를 실행한다:
   
   • Name 필드에, onChangeSearch를 입력한다.
   • Page Location 섹션에서, On Named Tag 옵션을 선택하고, Page 필드에 searchPage를, Tag 필드에 SearchBy를 입력한다.
   • Event Name 필드에, onChange를 입력한다.
   • Action Type 필드에, "Submit form and invoke action."을 입력한다.
   • Action 필드에, onChangeSearchByAction을 입력한다.
   이 Action List는 사용자의 Search By 선택을 저장하고, Service Consumer 빌더를 호출하여 서비스 공급자로부터 검색 결과 리스트를 얻고, 검색 페이지를 재 로드 한다.
6. searchValuesLookup Lookup Table을 모델에 추가하고, 이것의 XML Data 빌더 인풋을 getSearchValues 서비스 연산 결과로 설정한다. 이 변수는 Service Consumer 빌더를 모델에 추가한 결과로서 WebSphere Portlet Factory에 의해 생성된다. 다음 인풋을 Lookup 빌더에 입력한다:
   
   • Name 필드에, searchValuesLookup을 입력한다.
   • DataSource 필드에, XML Data를 선택한다.
   • XML Data 필드에, ${Variables/ServiceConsumerGetSearchValuesResults/Rowset}을 입력한다.
   • Variable Type 필드에, Value Tag와 Label Tag를 선택한다.
   • Value Tag 필드에, Name를 입력한다.
   • Label Tag 필드에, Name를 입력한다.

Search Value Ajax Type-Ahead 빌더를 애플리케이션에 추가함으로써 Ajax Type-Ahead 지원을 추가했다. 앞서 추가했던 Data Page Builder에 의해 생성된 Search Value span 태그에 빌더를 놓는다. 앞서 생성된 검색 테이블을 빌더의 인풋으로 사용된 검색 테이블용 데이터로 설정한다. Ajax Type-Ahead 빌더는 Lookup 테이블에 정의된 데이터 세트를 사용하여 Type-Ahead 제안을 생성한다. Filter Mode 빌더 인풋은 Type-Ahead 기능이 이것을 위해 정의된 Type-Ahead 데이터와 인터랙팅 하는 방식을 조정하는데 사용될 수 있다. 예를 들어, Ajax Type-Ahead 다이얼로그 박스에서, Filter 모드 옵션의 드롭-다운 리스트에서 "Show values containing data anywhere"를 선택한다. 이렇게 하면 검색 데이터 내 어디에나 사용자 인풋이 발생하는 곳에 매칭을 제시하는 Type-Ahead가 탄생한다. 또는, 이 필드에서 "Show values starting with data"를 선택하여 제안된 매치를 사용자가 제공한 데이터로 시작하는 값으로 좁힐 수 DT다. Type-Ahead 기능이 전체 Type-Ahead 제안 리스트를 제공하도록 하려면 Show all 값을 선택한다.

이것으로 Ajax Type-Ahead 기능을 추가하는 것을 끝냈다.

Albums Cart 포틀릿 만들기

Albums Cart 포틀릿은 사용자가 구매할 수 있도록 앨범 리스트를 모은다. 이것은 사용자가 이미지를 쇼핑 카트 이미지에 놓는 것으로 선택된 앨범을 추가하게 하여, Dojo 드롭 대상으로서 작동한다. 또한 Dojo 인라인 편집을 지원하여, 사용자가 전체 페이지를 리프레시 하지 않고 카트에 있는 앨범 수량을 업데이트 하도록 할 수 있다. (그림 15)

다음 단계는 Albums Cart 포틀릿을 개발하는 단계이다:

1. 새로운 모델을 WebSphere Portlet Factory 프로젝트에 추가한다.
2. Albums Listing 포틀릿의 Service Consumer 빌더와 같은 빌더 인풋을 가진 Service Consumer 빌더를 추가한다.
3. Portlet Adapter 빌더를 AlbumsCart 와 Albums Cart의 Name와 Portlet Title 빌더 인풋을 가진 모델에 추가한다.
4. cartPage Page 빌더에도 이 단계를 따른다. Listing 4의 HTML을 Page Contents (HTML) 빌더 인풋에 제공한다.

<html>
    <head><title>Music Online</title></head>
    <body>
        <!-- As a best practice, change the form name to a unique name -->
        <form name="myForm" method="post">
            <div align="center"><div style="font:12pt Arial;
            font-weight: bold;color: #336699;">Albums Cart</div><br>
           
            <div name="dropTag" >
                 <div name="cartImageTag" />
            </div>
           
            <span name="refreshTag">
              	<span name="cart"></span>
			 	<br>
			 	<br>
				<span name="update"></span>          	
				<br>
				<br>
				<b>Total = </b><span name="total"></span>
			</span>
							
            </div>
        </form>
    </body>
</html>
cartPage Page Contents (HTML) builder input

5. 메인 액션 리스트를 모델에 추가한다. 지금은, Actions 빌더 인풋을 빈 공간으로 두고, OK를 클릭하여 빌더 에디터를 닫는다.

cartImage Image 빌더를 추가한다. cartPage와 cartImageTag의 Page와 Tag 빌더를 제공한다. Image Source 빌더 인풋을 /factory/images/cart.gif로 설정한다.

Dojo 드래그&드롭 대상 추가하기

다음은 Dojo 드롭 지원을 Albums Cart 포틀릿에 추가하는 단계이다:

1. Dojo Drag and Drop Target 빌더를 모델에 추가한다. 이 빌더는 드래그&드롭 지원을 지정된 페이지 태그에 추가한다. 드롭 대상은 Drop Action 빌더 인풋과 Drop Type 빌더 인풋을 제공하여 수신하는 데이터 유형을 설정함으로써 액션에 연결될 수 있다. Dojo Drop Target 빌더에 다음 인풋을 입력한다:
   
   • Page 필드의 Page Location 아래에 cartPage를 입력한다.
   • Tag 필드의 Page Location 아래에, cartImageTag를 입력한다.
   • Drop 유형 필드에, albumID를 입력한다.
   • 빌더의 Past Action Behaviour 인풋 섹션 아래에, Post-Action Behavior 필드에, "Refresh specified page location after running action."을 선택한다.
   • Location to Refresh 아래에, Page 필드에 cartPage를 입력한다.
   • Location to Refresh 아래에, Tag 필드에 refreshTag를 입력한다.
   Drop Action 빌더 인풋을 설정하기 전에 Action List 빌더를 생성해야 한다는 것을 기억하라. 지금은, OK를 클릭하여 Dojo Drop Target 빌더를 닫는다.
2. refreshCart Action List 빌더를 Cart 모델에 추가한다. refreshCart 액션은 서비스 공급자로부터 앨범 상세를 받는다. 그리고 나서, 앨범을 카트에 추가하고, 현재 카트에 있는 모든 앨범의 가격을 업데이트 하고, 카트 페이지를 리프레시 한다.
3. albumID 인자를 추가하여 드래그 소스에 의해 드롭 대상으로 전달된 albumID를 받는다.
4. Return Type 빌더 인풋을 Object로 설정한다.
5. refreshCart Action List 다이얼로그 박스에 빌더 인풋들을 입력한다:
   
   • Name 필드에, refreshCart를 입력한다.
   • Arguments 필드에, 이름에 albumID를, 데이터 유형으로 String을 입력한다.
   • Return Type 필드에, Object를 입력한다.
6. Actions 필드에, 다음 Action List 아이템을 입력한다:
   
   • Assignment/Variables/ServiceConsumerGetAlbumDetailsInputs
   • /arguments/albumID=${Arguments/albumID}
   • DataServices/ServiceConsumer/getAlbumDetails
   • addAlbumToCartCallCopy
   • calculateTotal
   • cartPage
7. 앞서 생성했던 Dojo Drop Target 빌더를 열고, refreshCart를 Drop Action 빌더 인풋으로서 설정한다.

Dojo 인라인 편집 기능 추가하기

Dojo 인라인 편집 기능을 사용하여 Albums Cart 포틀릿 사용자가 카트에 담긴 앨범의 수량을 업데이트 하고 총액을 다시 계산할 수 있다. 다음은 이것을 Cart 포틀릿에 추가하는 단계이다:

1. calculateTotal Method 빌더를 추가한다. 다운로드 섹션의 샘플 코드의 코드를 Method Body 빌더 인풋에 추가한다.
2. onQuantityUpdate Action List 빌더를 추가한다. calculateTotal Method 빌더와 cartPage Page 빌더로의 호출을 추가하여 결과를 다시 디스플레이 한다.
   
   • Name 필드에 onQuantityUpdate를 입력한다.
   • Actions 필드에, 두 개의 액션들, calculateTotal과 cartPage를 입력한다.
3. Dojo Inline Edit 빌더를 Cart 모델에 추가한다. 다음 빌더 인풋을 Dojo Inline Edit 다이얼로그 박스에 입력한다:
   
   • Name 필드에, QuantityDojoInlineEdit을 입력한다.
   • Fields 필드에, [cartPage]cartDataPage/MusicLibrary/Album/Library를 입력한다.
   • Submit Form 옵션을 선택한다.
   • Action 필드에, onQuantityUpdate를 입력한다.
   • Post-Action Behavior 필드에, 드롭-다운 리스트에서 "Refresh specified page location after running action"을 선택한다.
   • Location to Refresh 필드에서, On Named Tag 옵션을 선택하고, Page 필드의 드롭-다운 리스트에서 cartPage를 선택하고, Tag 필드의 드롭-다운 리스트에서 refreshTag를 선택한다.

이것으로 Dojo 인라인 편집 기능을 완성했다.

다음 단계는 수량 변경 또는 삭제 결과로 생긴 변화로 인해 Albums Cart를 업데이트 하는 지원을 추가하는 단계이다.

1. 두 개의 Transform Filter 빌더를 추가하여 Cart 업데이트를 시작한다. 첫 번째 Transform Filter인 updateForDeletedItems는 cartListVar Variable에서 삭제를 위해 체크된 앨범들을 정렬하기 위해 호출된다.
   
   • Name 필드에, updateForDeletedItems를 입력한다.
   • Variable 필드에, cartListVar를 입력한다.
   • Element to Filter에, MusicLibrary/Album을 입력한다.
   • Target Variable에 cartListVar를 입력한다.
   • Filter Behaviour 인풋에, Filter Out Matching을 선택한다.
   • For Filter By 인풋:
     Element에 Album/Remove를 입력한다.
     Operator에 = 부호를 선택한다.
     Operand에 1을 입력한다.
     Compare Method에 Number를 선택한다.
2. 다음에는, updateForQuantity Transform Filter 빌더를 추가한다. 이 빌더는 수량 0을 가진 Albums Cart와 연결된 MusicLibrary Variable에서 앨범들을 정렬한다. 이 빌더의 설정은 다음과 같다:
   
   • Name 필드에 updateForQuantity를 입력한다.
   • Variable 필드에 cartListVar을 입력한다.
   • Element to Filter 필드에 MusicLibrary/Album을 입력한다.
   • Target Variable 필드에, cartListVar을 입력한다.
   • Filter By 필드에, 인자로서 Album/quantity를 입력하고, 연산자로서 = 부호를, 피연산자로 0을 비교 메소드로 숫자를 입력한다.
3. updateCart 액션 리스트를 만들어서 다양한 사용자 이벤트에 반응하여 카트 디스플레이를 리프레시 하는데 필요한 액션 시퀀스를 연결한다. updateCart 액션 리스트에 대한 빌더 인풋은 다음과 같다:
   
   • Name 필드에, updateCart를 입력한다.
   • Return Type 필드에, Object를 입력한다.
   • Actions 필드에, 다음과 같은 ActionList 아이템을 입력한다:
     updateForDeletedItemsCallFilter
     updateForQuantityCallFilter
     calculateTotal
     cartPage
   버튼을 updateCart 액션 리스트에 있는 호출로 연결함으로써 Update Cart 기능을 완성했다.
4. Button 빌더를 Cart 모델에 추가한다. Page Location 빌더 인풋을 cartPage의 업데이트 태그로 설정한다.
5. Label 빌더 인풋을 Update Cart로 설정한다.
6. Action Type을 "Submit form and invoke action."으로 설정한다.
7. Action 빌더 인풋을 updateCart에 제공한다.

이것으로 Albums Cart 포틀릿을 완성했다. 다운로드 섹션의 샘플 코드에서 전체적인 모델을 참조하라.

위로

결론: 한계와 교훈

이러한 기술을 모델 기반 개발에 사용할 수 있도록 한다. 이러한 빌더를 사용할 때 주의해야 할 것들이 몇 가지 있다. 단일 모델에서 한 개 이상의 Ajax 또는 Dojo 빌더를 사용할 경우에는, HTML 페이지의 같은 영역에서 겹치지 않도록 한다. 예를 들어:

• Dojo Drop Source 빌더를 사용한다면, Ajax Region 빌더가 페이지 레벨에 있을 경우 같은 페이지에 Ajax Region 빌더를 추가할 수 없다. 하지만, Dojo Drag Source 빌더로 겹치지 않는다면, 페이지 내에서 Ajax Region 빌더를 span 태그에 추가할 수 있다.
• Dojo Drop Target 빌더를 사용하고 있다면, Dojo Drop Target 빌더가 놓인 span 태그 내에서 Dojo Tooltip 빌더를 작동시킬 수 없다.
• 마찬가지로, Ajax Region과 Ajax Type-Ahead 빌더는 서로 겹친다면 같은 페이지 영역 내에서 사용될 수 없다. 하지만, 빌더가 서로 겹치지 않는 span 태그에 놓인다면 공존할 수 있다.

두 번째 Ajax 또는 Dojo 빌더를 또 다른 빌더에 의해 래핑된 span에 추가할 때, 이것에 의해 생성된 JavaScript는 리프레시 되지 못하고 같은 페이지 영역에서 빌더의 액션을 반영할 수 없다. 이는 예기치 못한 결과를 만들어 내며, 일부 Ajax 또는 Dojo 기능을 손실하게 된다. 빌더들이 고유의 영역에서 작동하도록 하고, 영역을 서로 겹치지 않도록 해야 한다.

위로

다운로드 하십시오

	다운로드 방식에 대한 정보

참고자료

• 포럼에 참여하기.
  
  
• developerWorks 기술자료, "WebSphere Portlet Factory V6.0.1 시작하기."
  
  
• IBM WebSphere Portlet Factory.

필자소개

		Stephen Cooke는 Lotus 제품 관련하여 12년 이상의 경력을 지닌 IT 전문가이다. Apple II에서 컴퓨터 프로그래밍을 시작했으며, 이후 다양한 플랫폼과 프로그래밍 언어로 작업했다. 2000년에 IBM Software Group에 참여했으며, 이 곳에서 Lotus와 WebSphere 관련 제품들로 작업하고 있다. 여가 시간에는, 테니스, 탁구, 농구, 저글링 등을 즐긴다.

		Abhishek Singh는 IBM Software Services for Lotus 팀의 IT 전문가이고 2003년부터 IBM WebSphere Portal 제품들을 다루고 있다. WebSphere Portlet Factory와 엔터프라이즈 J2EE 애플리케이션의 디자인과 개발 전문가이다. 소프트웨어 제품, 서비스 지향 아키텍처, 정보 시스템, 텔레콤 애플리케이션, 클라이언트/서버 애플리케이션의 디자인 및 개발 경력을 갖고 있다.

기사에 대한 평가

보다 나은 서비스를 제공하기 위함이오니 잠시 짬을 내어 이 양식을 제출하여 주십시오. 귀하께서 원하시는 정보를 얻었습니까? 예 아니오 잘 모르겠음   이 페이지 개선을 위한 의견을 주십시오:   이 정보가 얼마나 유용했습니까? (1 = 전혀 도움이 되지 않음, 5 = 매우 유용함) 1 2 3 4 5

위로