IBM Rational Application Developer 버전 7.5 Portal Toolkit: Part 3. IBM WebSphere Portal 버전 6.1을 위한 Web 2.0 포틀릿 및 포털 프로그래밍 지원

문서 옵션 PDF - Fits A4 and Letter 45KB (10 pages) Get Adobe® Reader® JavaScript가 필요한 문서 옵션은 디스플레이되지 않습니다. 토론 영어원문  제안 및 의견 피드백

난이도 : 중급

Charu Malhotra, Associate Software Engineer, IBM Corporation

원문 게재일 : 2009 년 5 월 26 일
번역 게재일 : 2009 년 8 월 04 일

이 기사에서는 IBM® WebSphere® Portal 버전 6.1에서 실행되는 포틀릿 및 포털 애플리케이션을 위해 IBM® Rational® Application Developer 버전 7.5에 도입된 Web 2.0 도구 지원에 대해 설명합니다. 이 도구 지원에 대한 이해를 돕기 위해 Web 2.0 기반 기술에 대한 기본 사항과 장점도 설명합니다.

이 기사에서는 IBM® WebSphere® Portal 버전 6.1에서 실행되는 포틀릿 및 포털 애플리케이션을 위해 IBM® Rational® Application Developer 버전 7.5에 도입된 Web 2.0 도구 지원의 장점을 활용하는 방법에 대해 설명합니다. 일반적인 포틀릿 애플리케이션에서는 서버에 대한 요청이 발생할 때마다 브라우저 페이지 전체가 새로 고쳐지기 때문에 페이지가 깜박이고 성능이 저하되는 현상이 나타난다. 하지만 Web 2.0 기술을 활용하면 뛰어난 사용자 환경을 제공하는 응답성 높은 동적 애플리케이션을 작성할 수 있다. 이 기술의 목표는 페이지 렌더링, 탐색, 집계 및 포틀릿 간 상호 작용에 대한 사용자 인터페이스 로직을 사용자의 브라우저에서 지원하는 방식을 통해 웹 브라우저를 기능이 강화된 클라이언트로 전환하는 것이다.

Rational Application Developer에서 제공하는 Web 2.0 도구 지원은 응답성 높은 동적 포틀릿 및 포털 애플리케이션의 작성 프로세스를 효율적으로 수행할 수 있도록 지원한다. 이러한 도구 지원을 통해 수행할 수 있는 작업은 다음과 같다.

• 포틀릿 간의 공동 작업을 위해 WebSphere Portal V6.1에 도입된 새 이벤트 패러다임인 클라이언트측 C2A(Client-Side Click-to-Action)를 사용하여 상호 작용하는 포틀릿을 설계할 수 있다.
  
  
• Person Menu 및 Person Menu의 확장 기능을 삽입할 수 있다.
  
  
• 포틀릿 애플리케이션용 Ajax 프록시를 사용할 수 있다.
  
  
• 포틀릿 환경 설정을 효율적으로 검색하는 클라이언트측 프로그래밍 모델을 사용하여 클라이언트측에서 포틀릿 상태 변경을 수행할 수 있다.

이 기사에서는 위 네 가지 주제를 차례로 설명한다. 각 주제별로 해당하는 특정 Web 2.0 기반 기술을 설명한 후 동일한 기능을 제공하는 도구 지원을 보여 주는 간단한 예제를 살펴본다.

이 기사의 대상 독자: 포틀릿 및 포털 기반 애플리케이션 개발자

이 기사의 목표: 시맨틱 태깅, Ajax 프록시 및 클라이언트측 프로그래밍 모델에 대한 도구 지원 기능을 활용하여 응답성이 높고 다양한 기능을 갖춘 대화식 포틀릿 및 포털 기반 애플리케이션의 개발 방법에 대해 설명한다.

클라이언트측 C2A(Client-Side Click-to-Action)를 사용하여 상호 작용 및 공동 작업하는 포틀릿 설계하기

C2A(Click-to-Action) 이벤트는 포틀릿이 서로 상호 작용하고 정보를 공유하는 방법 중 하나이다.

C2A(Click-to-Action)

C2A 전달 방법을 사용하면 간단한 한 번의 클릭만으로 소스 포틀릿의 데이터를 하나 이상의 대상 포틀릿으로 전달할 수 있다. 소스 요소를 클릭하면 선택한 요소와 일치하는 대상 작업의 목록을 보여 주는 팝업 메뉴가 표시된다. 메뉴 항목을 선택하면 해당 대상이 호출되고 소스 데이터가 이 대상에게 전달된다. 소스 데이터가 처리된 후 대상 포틀릿이 작업을 트리거하고 결과를 표시한다.

클라이언트측 C2A(Click-to-Action)

클라이언트측 C2A는 WebSphere Portal V6.1에 도입된 C2A 프레임워크의 새로운 구현으로 Web 2.0 기술을 기반으로 하며 시맨틱 태깅을 사용하여 소스와 대상을 정의한다.

시맨틱 태그의 기본 목적은 일반적인 HTML 문서의 컨텐츠를 재사용하기 위한 것이며 DOM(Document Object Model) 구문 분석 중에 평가되는 메타 정보를 사용하여 HTML 문서의 컨텐츠에 어노테이션을 지정하기 위한 것이다.

시맨틱 태깅과 LOF(Live Object Framework)

클라이언트측 C2A는 C2A 소스를 시스템의 라이브 오브젝트로 정의하는 LOF(Live Object Framework)를 기반으로 한다. 시맨틱 태그의 루트 요소는 특정 클래스를 해당 요소에 추가하여 표시되며 LOF로 지정된다.

LOF는 기본 DOM 구문 분석 및 메뉴 관리 서비스도 제공한다.

기존 C2A 기술에 비해 향상된 점

WebSphere Portal에 도입된 새로운 클라이언트측 C2A 기술은 기존 C2A 기술에 비해 많은 장점을 가지고 있다.

• 새로 도입된 이벤트 작성 패러다임은 IBM 및 JSR(Java™ Specification Request) 포틀릿에 사용할 수 있는 데 반해 기존 C2A 기술은 IBM Portlet API를 따르는 포틀릿에만 사용할 수 있었다.
  
  
• 서버측 작업뿐만 아니라 클라이언트측 JavaScript C2A 대상 작업도 지원한다. 예를 들어, 소스 포틀릿에서 메뉴 항목을 선택하여 소스 데이터가 해당 대상에게 전달되면 서버측 작업 또는 JavaScript 작업이 대상 포틀릿에서 트리거될 수 있다.
  
  
• 새로운 클라이언트측 C2A 기술을 사용하면 C2A 소스 및 대상의 평가 및 실행이 브라우저에서 발생한다. 소스 및 대상 일치를 더 이상 서버에서 처리하지 않아도 되며 서버에서 메뉴 생성 코드도 제거된다. 결과적으로 서버 로드가 줄어든다.
  
  
• 메뉴 마크업은 C2A 소스 메뉴 아이콘을 클릭할 때만 생성된다.

이러한 모든 장점은 응답성이 높고 반응 시간이 빠른 UI를 만드는 데 도움이 되며 서버 왕복 시간과 페이지 깜박임도 없앨 수 있다. 결과적으로 정말 좋은 사용자 환경을 제공할 수 있다.

용어

그림 1에서는 C2A 구성 요소를 보여 준다. 표 1에서는 이 기사에서 사용하는 클라이언트측 C2A 용어를 설명한다.

클라이언트측 C2A를 위한 Rational Application Developer 도구 지원

Rational Application Developer의 클라이언트측 C2A를 위한 도구 지원은 직관적인 마법사, 팔레트 드로어 및 메뉴 표시줄 항목, 자동 코드 생성 및 가능한 데이터 유형 일치와 같은 기능을 제공한다. 이러한 기능은 클라이언트측 C2A를 지원하는 포틀릿 애플리케이션을 최대한 쉽게 작성하는 데 도움이 된다.

이러한 도구를 사용하면 다음과 같은 작업을 수행할 수 있는 포틀릿을 작성할 수 있다.

• 데이터를 다른 포틀릿에 보낼 수 있다(소스 포틀릿).
  
  
• 다른 포틀릿의 데이터를 받아서 자체 보기를 업데이트할 수 있다(대상 포틀릿).

하나의 포틀릿이 소스 및 대상이 될 수 있다. 즉, 다른 포틀릿에게 데이터를 보낼 수도 있고 다른 포틀릿의 데이터를 받을 수도 있다.

위로

샘플 애플리케이션

이 기사에서는 다음 두 가지 예제 애플리케이션을 통해 클라이언트측 C2A의 기능을 보여 준다.

• 첫 번째 애플리케이션에서는 소스 포틀릿의 데이터를 대상 포틀릿으로 보낸 다음 대상 포틀릿에서 데이터를 받은 후 단순한 JavaScript 작업을 호출하는 방법을 보여 준다.

• 두 번째 예제는 배송 회사에서 주문 및 고객에 대한 세부 사항을 관리하는 데 사용하는 포틀릿 애플리케이션이다. 이 애플리케이션에는 다음과 같은 5개의 포틀릿이 포함되어 있다.
  
  
• Orders 포틀릿: 주문에 대한 월간 세부 사항을 관리한다.
  
  
• Order Details 포틀릿: 주문 세부 사항을 보여 준다.
  
  
• Account Details 포틀릿: 주문의 계정 세부 사항을 보여 준다.
  
  
• Customer Details 포틀릿: 특정 고객의 세부 사항을 보여 준다.
  
  
• Tracking Details 포틀릿: 주문에 대한 추적 세부 사항을 보여 준다.

배송 애플리케이션에서는 Order Details 및 Tracking Details 포틀릿이 클라이언트측 C2A를 사용하여 데이터를 교환할 수 있다. 이 작업에 대한 응답으로 Tracking Details 포틀릿에서 서버측 작업을 호출할 수 있다.

Rational Application Developer에서 제공하는 도구를 사용하면 위 작업을 매우 간단하게 수행할 수 있다.

샘플 애플리케이션 1

이 간단한 애플리케이션에서는 사용자의 이름을 소스 포틀릿에서 대상 포틀릿으로 보낼 수 있다. 값을 받은 후 대상은 대상 포틀릿에 "Hello [your name]"을 인쇄하는 JavaScript를 호출한다.

위 결과를 얻으려면 다음과 같은 단계를 수행해야 한다.

1. 새 포틀릿 프로젝트(C2ASource)를 작성한다.
   
   
2. C2ASource 포틀릿 프로젝트에 새 포틀릿(C2ATarget 포틀릿)을 작성한다.
   
   
3. 클라이언트측 C2A를 사용하여 데이터를 C2ATarget 포틀릿으로 보내도록 C2ASource 포틀릿을 설정한다.
   
   
4. 소스 팝업 메뉴에 클라이언트측 C2A 메뉴 헤더를 삽입한다.
   
   
5. 클라이언트측 C2A를 사용하여 C2ASource 포틀릿의 데이터를 받도록 C2ATarget 포틀릿을 설정한다.
   
   
6. WebSphere Portal에 포틀릿 애플리케이션을 게시한다.

C2A 소스 포틀릿 프로젝트 작성하기

1. File > New > Project > Portlet Project를 선택하고 Next를 클릭한다. New Portlet Project 마법사가 실행된다. 다음 정보를 입력한다(그림 3 참조).
   1. C2aSource를 포틀릿의 Project name으로 입력한다.
      
      
   2. WebSphere Portal 6.1을 Target Runtime으로 선택한다.
      
      
   3. JSR 168 Portlet(이 예제의 경우), JSR 286 Portlet 또는 IBM Portlet을 Portlet API로 선택한다.
      
      
   4. Faces portlet(이 예제의 경우) 또는 Basic portlet을 Portlet type으로 선택한다.
2. Next를 클릭하고 Finish를 클릭한다.

C2aTarget 포틀릿 작성하기

앞에서 작성한 C2aSource 포틀릿 프로젝트에 새 포틀릿(C2aTarget)을 작성한다.

1. Project Explorer에서 C2ASource 프로젝트를 마우스 오른쪽 단추로 클릭한다.
   
   
2. New > Portlet을 선택한다. New Portlet 마법사가 실행된다. 다음 정보를 입력한다(그림 4 참조).
   1. C2ATarget을 포틀릿의 Name으로 입력한다.
      
      
   2. C2ATarget 포틀릿의 Portlet type을 C2ASource 포틀릿과 동일한 유형으로 유지한다.
   
   
   
3. Next를 클릭하고 Finish를 클릭한다.

데이터를 보내도록 C2ASource 포틀릿 설정하기

클라이언트측 C2A를 사용하여 데이터를 C2ATarget 포틀릿으로 보내도록 C2ASource 포틀릿을 설정하려면 다음을 수행한다.

1. C2ASourceView.jsp를 두 번 클릭한다. 그러면 Page Designer에 이 파일이 열린다.
   
   
2. Palette 보기에서 Portlet 드로어를 선택한다.
   
   
3. 팔레트에 있는 Client-Side Click-to-Action Output Property 메뉴 항목을 C2ASourcePortletView.jsp로 끌어 놓는다(그림 5 참조).

4. 또는 메뉴 표시줄에서 Insert > Portlet > Client-Side Click-to-Action Output Property를 선택한다(그림 6 참조).

Insert Client-Side Click-to-Action Output Property 마법사가 표시된다.

데이터를 보내도록 포틀릿을 설정하려면 다음 두 필드에 값을 입력해야 한다.

• Data Type URI: 데이터의 형식과 시맨틱을 설명하는 이름을 입력한다.
  
  
• Value: 대상 작업에 전달되는 실제 데이터를 입력한다.

이 작업을 수행하려면 다음 단계를 따른다(그림 7 참조).

5. http://C2Asource#Myname을 Data Type URI 필드에 지정한다.
   
   
6. 사용자의 이름(또는 대상 포틀릿에 보낼 값)을 Value 필드에 입력하고 Finish를 클릭한다.

7. C2ASourceView.jsp를 저장한다.
   
   
8. 삽입된 코드를 보려면 Source 탭을 클릭한다.

Listing 1의 클라이언트측 C2A 소스 오브젝트 코드는 C2ASourceView.jsp에 자동으로 생성 및 삽입된다.

<div class="C2A:source"> 
  <span class="C2A:typename" style="display: none">http://C2Asource#MyName</span> 
  <span class="C2A:value" style="display: none">Charu</span>
  <span class="C2A:anchor">Anchor Data</span>
</div> 

이 코드에서 볼 수 있는 것처럼 <div> 및 <span> 태그는 특별한 의미를 지닌 클래스 속성을 제공하는 시맨틱 태그로 지정되어 있으며 해당 의미는 DOM 구문 분석 중에 LOF에 의해 평가된다.

Anchor Data는 C2A 후버 UI 문자열에 삽입되는 기본값(즉, 브라우저에 표시되는 값)이며 C2ASource임을 나타낸다. 포틀릿 애플리케이션이 WebSphere Portal에 게시된 후 Anchor Data 위에 마우스를 놓으면 소스 포틀릿 메뉴가 표시된다. 소스 메뉴에는 대상 포틀릿별로 하나의 항목이 있으며 소스 포틀릿에서 보낸 값을 이 항목에 사용할 수 있다.

기본값인 Anchor Data는 C2A 후버 UI 문자열로 사용하려는 값(이 시나리오에서는 사용자 이름)으로 변경할 수 있다.

그림 8에서는 C2ASourceView.jsp의 Design 보기를 보여 준다.

메뉴 헤더 삽입

클라이언트측 C2A 메뉴 헤더를 소스 팝업 메뉴에 삽입하려면 다음 단계를 수행한다.

1. C2ASourceView.jsp를 두 번 클릭한다. 그러면 Page Designer에 이 파일이 열린다.
   
   
2. Palette 보기에서 Portlet 드로어를 선택한다.
   
   
3. 팔레트에 있는 Client Side click-to-action Menu Header 메뉴 항목을 C2ASourcePortletView.jsp로 끌어 놓는다(그림 9 참조).

4. 또는 메뉴 표시줄에서 Insert > Portlet > Client-Side Click-to-Action Menu Header Property를 선택할 수 있다.

Insert Menu Header 마법사가 표시된다.

5. 그림 10처럼 Display Myname을 헤더 컨텐츠로 지정하고 Finish를 클릭한다.

6. C2ASourceView.jsp를 저장한다.
   
   
7. 삽입된 코드를 보려면 Source 탭을 클릭한다.

Listing 2의 클라이언트측 C2A 메뉴 헤더 코드는 C2ASourceView.jsp에 자동으로 생성 및 삽입된다.

<p class="c2a:display" style="display: none"> Display Myname </p> 

Listing 3처럼 클라이언트측 C2A 소스 오브젝트 코드가 업데이트된다.

<div class="c2a:source"> 
  <span class="c2a:typename" style="display: none">http://c2asource#MyName</span> 
  <span class="c2a:value" style="display: none">Charu</span>
  <span class="c2a:anchor">Charu Malhotra</span>
  <p class="c2a:display" style="display: none"> Display My name </p> 
</div> 

데이터를 받도록 C2ATarget 포틀릿 설정하기

클라이언트측 C2A를 사용하여 C2ASource 포틀릿의 데이터를 받도록 C2ATarget 포틀릿을 설정한다.

C2ATarget 포틀릿을 설계한다.

("C2A 소스 포틀릿 프로젝트 작성하기" 섹션의 1단계에서 Basic portlet을 Portlet type으로 선택한 경우에는 기본 포틀릿에 이미 기본 양식, 텍스트 필드 및 Submit 단추가 있으므로 다음 단계를 무시할 수 있다.)

1. C2ASourceView.jsp를 두 번 클릭하여 연다.
   
   
2. Design 보기로 전환한다.
   
   
3. Palette 보기에서 Form Tags 드로어를 선택한다.
   
   
4. 팔레트에 있는 Form 오브젝트를 C2ATargetView.jsp로 끌어 놓는다.
   
   
5. 이제 팔레트에 있는 Text Field 오브젝트를 이 양식으로 끌어 놓는다.
   
   
6. Insert Text Field 대화 상자가 표시된다. C2AInput을 Name 필드에 지정하고 OK를 클릭한다.
   
   
7. 팔레트에 있는 Submit 단추를 앞의 양식에 삽입한 필드 옆으로 끌어 놓는다(그림 11 참조).
   
   
8. Insert Submit Button 대화 상자가 표시된다. my submit를 Name 필드에 지정하고 Submit를 Label 필드에 지정한 후 OK를 클릭한다.

데이터를 받도록 C2ATarget 포틀릿 설정하기

C2ASource 포틀릿의 데이터를 받도록 C2ATarget 포틀릿을 설정한다.

1. Palette 보기에서 Portlet 드로어를 선택한다.
   
   
2. 팔레트에 있는 Client-Side Click-to-Action Input Property 메뉴 항목을 앞 단계를 수행하여 작성한 Submit 단추(또는 기본 포틀릿의 기본 Submit 단추)로 끌어 놓는다(그림 12 참조).

3. 또는 메뉴 표시줄에서 Insert > Portlet > Client-Side Click-to-Action Input Property를 선택할 수 있다.

Insert Client-Side Click-to-Action Input Property 마법사가 표시된다.

데이터를 받도록 포틀릿을 설정하려면 사용자가 다음 세 가지 항목을 입력해야 한다.

• Data Type URI: 데이터의 형식과 시맨틱을 설명하는 이름을 입력한다. 이 필드의 값은 C2A 소스 포틀릿의 Data Type URI 필드 값과 일치해야 한다.
  
  
• Action Value: C2A 소스 포틀릿에서 보낸 값이 대상 포틀릿에 도달할 때 실행되는 작업이다. 이 값은 서버측 작업 또는 JavaScript 작업일 수 있다.
  
  
• Action Label: 이 대상에 대한 C2A 팝업 메뉴로 표시할 레이블이다. 이 레이블은 앞의 그림 1에서 본 C2A 소스 포틀릿 팝업 메뉴의 항목에 해당한다.

Data Type URI 필드의 경우에는 드롭다운 목록에 가능한 데이터 유형 일치 항목이 표시된다(그림 13 참조).

4. 그림 14와 같이 http://C2Asource#Myname을 Data Type URI 필드 드롭다운 메뉴에서 선택하고 Next를 클릭한다.

5. 이 시나리오에서는 서버 왕복 시간을 없애기 위해 javascript:void(0);를 Action Value 필드에 지정한다. 다음 섹션에서는 양식의 제출 이벤트가 발생할 때 JavaScript 작업을 호출하는 방법을 보여 준다.
   
   
6. 그림 14와 같이 Send My name to Target을 Action Label 필드에 지정하고 Finish를 클릭한다.

7. C2ATargetView.jsp를 저장한다.
   
   
8. 삽입된 코드를 보려면 Source 탭을 클릭한다.

Listing 4의 클라이언트측 C2A 대상 오브젝트 코드는 C2ATargetView.jsp에 자동으로 생성 및 삽입된다.

<form class="c2a:target" action="javascript:void(0);"> 
  <input type="text" name="c2aInput" size="20" class="c2a:action-param"><br>
  <input type="submit" name="mysubmit" value="Submit">
  <span class="c2a:typename" style="display: none">http://c2asource#MyName</span> 
  <span class="c2a:action-label" style="display: none"> Send My name to Target</span> 
</form> 

c2a:action-param이라는 태그가 지정되어 있는 c2aInput 텍스트 필드는 C2A 소스가 보낸 값을 받는다.

그림 15에서는 C2ATargetView.jsp의 Design 보기를 보여 준다.

9. C2ATargetView.jsp의 Source 보기로 전환한다.
   
   
10. 다음 코드 및 JavaScript 작업을 C2ATargetView.jsp의 form 태그 위에 추가한다(Listing 5 참조).

<b><div id="mydiv"></div></b>
<br><br> 
<script type="text/javascript"> 
function displayName() 
{ 
var name = window.ibm.portal.c2a.event.value; 
var myname=document.getElementById("mydiv"); 
myname.innerHTML= "Hello " +name +"!!"; 
myname.value="Hello " +name + "!!";
 } 
</script> 

대상 포틀릿에서 이 JavaScript를 호출하면 "Hello [yourname]"이 표시된다.

11. 그런 다음 form 태그에 onsubmit="displayName();return false;" 속성을 추가한다.

이렇게 하면 C2A 소스 포틀릿의 값이 대상 포틀릿에 도달할 때 위 JavaScript가 호출된다(Listing 6 참조).

<form class="c2a:target" onsubmit="displayName();return false;" 
    action= "javascript:void(0);">
  <input type="text" name="c2aInput" id=mytext size="20" class="c2a:actionparam"><br> 
  <input type="submit" name="mysubmit" value="Submit"> 
  <span class="c2a:typename" style="display: none">http://c2asource#MyName</span> 
  <span class="c2a:action-label" style="display: none" >Send Myname to Target </span> 
</form> 

12. C2ATargetView.jsp를 저장한다.

WebSphere Portal에 포틀릿 애플리케이션 게시하기

이제 포틀릿 애플리케이션을 WebSphere Portal에 게시할 준비가 완료되었다.

C2ASource 포틀릿 프로젝트를 마우스 오른쪽 단추로 클릭하고 Run on Server를 선택한다. 그림 16에서는 게시된 샘플의 모습을 보여 준다.

샘플 애플리케이션 2

Shipping Details 포틀릿 애플리케이션에는 다음과 같은 포틀릿이 있다.

• Orders: 이 포틀릿은 특정 월에 발생한 주문에 대한 요약 정보를 보여 준다. C2A 소스 역할을 수행하며 다음과 같은 정보를 보낸다.
  • Order Details 및 Account Details에게 Order_ID를 보낸다.
    
    
  • Customer Details에게 Customer_ID를 보낸다.

• Order Details: 이 포틀릿은 특정 주문에 대한 세부 사항을 보여 준다. C2A 대상 역할을 수행하며 Orders 포틀릿으로부터 Order_ID를 받는다. 이 기사에서는 C2A 소스 옵션을 사용하여 Tracking_ID를 Tracking Details 포틀릿에게 보내도록 이 포틀릿을 설정한다.

• Account Details: 이 포틀릿은 특정 주문에 대한 계정 세부 사항을 보여 준다. C2A 대상 역할을 수행하며 Orders 포틀릿으로부터 Order_ID를 받는다.

• Customer Details: 이 포틀릿은 특정 고객에 대한 세부 사항을 보여 준다. C2A 대상 역할을 수행하며 Orders 포틀릿으로부터 Customer_ID를 받는다.

• Tracking Details: 이 포틀릿은 특정 배송에 대한 세부 사항을 보여 준다. 이 기사에서는 C2A 대상 옵션을 사용하여 Order Details으로부터 Tracking_ID를 받도록 이 포틀릿을 설정한다.

우선 이 기사의 끝에서 제공하는 샘플을 다운로드한 후 WebSphere Portal에서 실행한다.

현재 시나리오에서는 OrdersPortlet이 다음 정보를 보낸다.

• Order Details 및 Account Details에게 Order_ID를 보낸다.
  
  
• Customer Details에게 Customer_ID를 보낸다.

샘플을 서버에 게시한 후 다음 단계를 수행한다.

1. OrdersPortlet에 표시된 텍스트 상자에 원하는 월(예: September)을 입력하고 Submit를 클릭한다. 입력한 특정 월에 해당하는 주문이 표시된다.
   
   
2. 주문 세부 사항이 표시되면 임의의 Order_ID 위에 마우스 커서를 놓는다. 메뉴가 표시된다.
   
   
3. Show Order Details 메뉴 항목을 클릭한다. 특정 주문의 세부 사항이 Order Details 포틀릿에 표시된다.
   
   
4. Show Account Details 메뉴 항목을 클릭한다. 특정 주문의 계정 세부 사항이 Account Details 포틀릿에 표시된다.
   
   
5. 이제 임의의 Customer_ID 위에 마우스 커서를 놓는다. 그러면 메뉴가 표시된다.
   
   
6. Show Customer Details 메뉴 항목을 클릭한다. 특정 고객의 세부 사항이 Customer Details 포틀릿에 표시된다.

그림 17에서는 게시된 샘플의 모습(Order Details를 Tracking Details에게 Tracking_ID를 보내는 C2aSource로 설정하기 전)을 보여 준다.

게시된 샘플에서 볼 수 있듯이 현재까지는 Order Details 포틀릿과 Tracking Details 포틀릿이 서로 통신하지 않고 있다.

이제 Order Details 포틀릿을 Tracking Details 포틀릿에게 Tracking_ID를 보내는 C2A 소스로 설정하는 방법을 살펴본다. 그런 다음 Tracking Details 포틀릿을 Order Details 포틀릿으로부터 Tracking_ID를 받는 C2A 대상으로 설정한다. Tracking_ID가 수신되면 Tracking Details 포틀릿에서 특정 배송 추적의 세부 사항을 표시하는 서버측 작업이 호출된다(그림 18 참조).

위 결과를 얻으려면 다음과 같은 단계를 수행해야 한다.

7. OrderDetail을 C2A 소스로 설정한다.
   
   
8. TrackingDetail을 C2A 대상으로 설정한다.
   
   
9. WebSphere Portal에 포틀릿 애플리케이션을 게시한다.

OrderDetail을 C2A 소스로 설정하기

1. OrderDetailsView.jsp를 두 번 클릭한다. 그러면 Page Designer에 이 파일이 열린다.
   
   
2. 팔레트에 있는 Client side Click-to-Action Output Property를 OrderDetailsView.jsp의 Design 보기에 있는 Tracking_ID 열로 끌어 놓는다.

3. Insert Client-Side Click-to-Action Output Property 마법사가 표시된다. 그림 20과 같이 Data Type URI 및 Value 필드의 값을 입력하고 Finish를 클릭한다.

4. OrderDetailsView.jsp를 Design 보기에 연다.
   
   
5. Anchor Data의 Anchor 값을 C2A 후버 UI 문자열로 사용할 값으로 변경한다. 일반적으로 C2A 후버 UI 문자열은 전달된 C2A 값과 같은 값으로 유지한다. 현재 시나리오를 예로 들어 보면 Order Details 포틀릿에서 보낸 Tracking_ID가 사용자에게 표시되어야 한다.

6. OrderDetailsView.jsp를 Source 보기에 연다. Listing 7의 코드가 삽입된다.

<td> 
  <div class="c2a:source"> 
    <span class="c2a:typename" style="display: none">
      http://clientsidec2a#TrackingID</span>
    <span class="c2a:value" style="display: none"><%=od.getTrackingId() %></span> 
    <span class="c2a:anchor"><%=od.getTrackingId()%></span>
  </div> 
</td> 

7. Display Myname 애플리케이션과 마찬가지로 소스에 메뉴 헤더를 삽입할 수 있다. Send Tracking Id to Tracking Details를 헤더 컨텐츠로 지정한다.
   
   
8. OrderDetailsView.jsp를 저장한다. Listing 8처럼 클라이언트측 C2A 소스 오브젝트 코드가 업데이트된다.

<td> 
  <div class="c2a:source"> 
    <span class="c2a:typename" style="display: none">
      http://clientsidec2a#TrackingID</span>
    <span class="c2a:value" style="display: none">
    <%=od.getTrackingId() %></span> 
    <span class="c2a:anchor"><%=od.getTrackingId()%></span>
    <p class="c2a:display" style="display: none">
      Send Tracking Id to Tracking Details</p> 
  </div>
</td> 

TrackingDetail을 C2A 대상으로 설정하기

1. TrackingDetailEntry.jsp를 두 번 클릭하여 Page Designer에서 연다.
   
   
2. 팔레트에 있는 Client-Side Click-to-Action Input Property 메뉴 항목을 TrackingDetailEntry.jsp 파일의 Design 보기에 있는 Submit 단추로 끌어 놓는다(그림 22 참조).

Insert Client-Side Click-to-Action Input Property 마법사가 표시된다.

3. 그림 23과 같이 http://clientsideC2A#TrackingID를 Data Type URI 드롭다운에서 선택하고 Next를 클릭한다.

4. 이 시나리오에서는 Action Value 필드의 기본값을 그대로 사용한다.
   
   
5. 그림 24와 같이 Show Tracking Details를 Action Label 필드에 지정하고 Finish를 클릭한다.

6. TrackingDetailEntry.jsp를 Source 보기에서 열고 삽입된 코드를 본다(Listing 9 참조).

<FORM method="POST"  
    enctype="application/x-www-form-urlencoded" 
    name="TrackingDetails"
    class="c2a:target" action="<%= tdb.getActionURL() %>">
  <LABEL class="wpsLabelText" for="<%= TrackingPortlet.TRACKING_ID %>"> Enter tracking id 
    to display details:</LABEL><BR/> 
  <INPUT name="<%= TrackingPortlet.TRACKING_ID %>" type="text" 
    class="wpsEditField c2a:action-param"/><BR/>
  <INPUT class="wpsButtonText" name="tracking details" type="submit" value="Submit"/> 
  <span class="c2a:typename" style="display: none"> http://clientsidec2a#TrackingID</span>
  <span class="c2a:action-label" style="display: none">Show Tracking Details</span> 
</FORM> 

참고: submit 단추의 이름을 tracking details로 변경하고 TrackingDetailEntry.jsp를 저장한다.

현재 WebSphere Portal에서는 클라이언트측 C2A 대상 코드가 올바르게 작동하려면 submit 단추에 "Submit"라는 이름을 지정할 수 없다.

7. TrackingView.jsp에 대해서도 이들 단계를 반복한다.

WebSphere Portal에 포틀릿 애플리케이션 게시하기

이제 포틀릿 애플리케이션을 WebSphere Portal에 게시할 준비가 완료되었다.

8. 포틀릿 프로젝트를 마우스 오른쪽 단추로 클릭하고 Run on Server를 선택한다. 그림 25에서는 게시된 샘플의 모습을 보여 준다.

위로

포틀릿 애플리케이션에 Person Menu 삽입하고 확장하기

다음은 Rational Application Developer 및 WebSphere Portal의 Person Menu 구성 요소에 대한 기본적인 정보이다.

Person JSP™(Java™Server Page) 태그는 명명된 개인과 관련된 상황에 맞는 협업 기능을 제공하며 Person Menu에 표시할 특정 작업 세트를 렌더링하는 HTML을 생성한다. 이 태그는 처음에는 JavaScript 코드에서 호출할 수 없는 서버측 JSP 태그로 구현되었다. 서버 로드를 최소화하여 성능과 확장성을 향상시키는 동시에 Ajax 클라이언트를 지원하기 위해 WebSphere Portal에서는 클라이언트에서 호출할 수 있는 JavaScript API를 사용할 수 있도록 Person JSP 태그가 업데이트되었다.

업데이트된 Person Menu에는 hCard 속성을 지정하여 선택된 개인에 대한 연락처 정보 세트가 표시된다. (hCard는 vCard의 HTML 표현이다.)

Person Menu 확장을 사용하면 실행할 수 있는 작업 또는 대상으로 지정된 작업에 대한 JavaScript를 작성하여 Person Menu를 확장할 수 있다. Rational Application Developer에서도 이와 동일한 작업을 수행하는 데 필요한 도구가 지원된다.

LOF(Live Object Framework) 및 시맨틱 태깅

표준 hCard 마이크로 형식을 사용한 시맨틱 태그가 개인 이름에 지정되며 이러한 개인 이름은 시스템에서 Live Object처럼 동작한다. 페이지에서 hCards에 대해 Person Menu를 사용하는 Person 서비스는 LOF(Live Object Framework)에 플러그인된다.

기존 Person JSP 태그에 비해 향상된 장점

• 새로운 시맨틱 태깅 기반 Person Menu는 기존 JSP Person 태그에 비해 기능은 동일하지만 사용자 환경이 개선되었다.
  • 각 hCard에 후버 및 팝업을 표시한다.
    
    
  • Show Profile, Send E-mail 등과 같은 작업 가능한 메뉴 항목에 대한 액세스를 제공한다.

• 개인 정보는 개인에 대한 팝업이 포털에 표시될 때만 검색되므로 개인의 이름을 클릭할 때까지 서버 로드가 최소로 유지된다. 이처럼 데이터 검색이 온디맨드 방식으로 수행되기 때문에 클릭하지 않은 개인 이름에 대한 서버 작업이 수행되지 않으므로 서버 리소스의 낭비를 방지할 수 있다.
  
  

• Person Menu 확장을 사용하면 Person Menu를 확장할 수 있다. 둘 이상의 확장을 추가할 수 있으며 이러한 확장을 통해 룩앤필과 사용자 레지스트리를 사용자 정의할 수도 있다.

샘플 애플리케이션

이제 포틀릿 애플리케이션에서 Person Menu를 삽입한 후 Person Menu 확장을 사용하여 Person Menu를 확장하는 작업을 Rational Application Developer에서 쉽게 수행하는 방법을 보여 주는 간단한 애플리케이션을 작성한다.

Person Menu에 작업 추가하기

이 애플리케이션을 설계하려면 다음과 같은 단계를 실행해야 한다.

1. WebSphere Portal 대상 포틀릿 프로젝트를 작성한다.
   
   
2. Person Menu를 포틀릿 .jsp 파일에 삽입한다.
   
   
3. Person Menu 확장 코드를 포틀릿 .jsp 파일에 삽입하여 Person Menu를 확장한다.
   
   
4. Person Menu 확장에 대한 JavaScript를 제공한다.

포틀릿 애플리케이션을 설계한 후 WebSphere Portal에 게시한다.

포틀릿 프로젝트 작성

1. File > New > Project > Portlet Project를 선택한 후 Next를 누른다. New Portlet Project 마법사가 표시된다.
   
   
2. PersonMenuExample을 포틀릿의 Name으로 입력한다.
   
   
3. WebSphere Portal 6.1을 Target Runtime으로 선택한다.
   
   
4. JSR 168 Portlet, JSR 286 Portlet 또는 IBM Portlet을 Portlet API로 선택한다.
   
   
5. Faces 또는 Basic을 Portlet type으로 선택한다.
   
   
6. Next를 누르고 Finish를 누른다.

Person Menu 삽입하기

1. PersonMenuExampleView.jsp를 두 번 클릭하여 Page Designer에서 연다.
   
   
2. Palette 보기에서 Portlet 드로어를 선택한다.
   
   
3. Palette 보기에 있는 Person Menu 오브젝트를 PersonMenuExampleView.jsp로 끌어 놓는다(그림 26 참조).

4. 또는 메뉴 표시줄에서 Insert > Portlet > Person Menu를 선택할 수 있다. 직관적인 Insert Person Menu 마법사가 표시된다.
   
   
5. 그림 27과 같이 다음과 같은 hCard 속성을 지정한다.
   • Name
     
     
   • e-mail
     
     
   • Address(선택적)
     
     
   • Phone(선택적)

6. Finish를 클릭하고 PersonMenuExampleView.jsp를 저장한다.
   
   
7. PersonMenuExampleView.jsp를 Source 보기에 연다. Listing 10의 코드가 삽입된다.

<div class="vcard"> 
  <span class="fn">Charu Malhotra</span> 
  <span style="display: none"class="email">charumalhotra@in.ibm.com</span>
</div> 

Person Menu Extension 삽입하기

위 시나리오를 계속 진행한다.

1. 다시 한번 Palette 보기에서 Portlet 드로어를 선택한다.
   
   
2. Palette 보기에 있는 Person Menu Extension 오브젝트를 PersonMenuExampleView.jsp로 끌어 놓는다(그림 28 참조).

4. 또는 메뉴 표시줄에서 Insert > Portlet > Person Menu Extension을 선택할 수 있다. 직관적인 "Insert Person Menu Extension" 마법사가 표시된다(그림 29 참조).
   
   

Person Menu Extension을 삽입하려면 다음 항목을 입력해야 한다.

• Action details ID: 도구 지원이 작업 ID를 자동으로 생성한다. 이 ID는 특정 Person Menu Extension에 고유해야 한다.

• JavaScript: 메뉴 항목이 선택될 때 호출되는 작업을 가지고 있는 JavaScript 이름이다. 이 JavaScript는 다음 디렉토리에 있어야 한다.

[WebSphere Portal Server Home]\ui\wp.tagging.liveobject\semTagEar\Live_Object_Framework.ear\liveobjects.war\javascript.

• Label: Person Menu Extension에 대한 레이블이다.
  
  
• Description: Person Menu Extension에 대한 설명이다.

• Specify ShowIf: 이 함수는 Person Menu Extension의 가시성을 결정한다.
  
  

• Specify Action: 이 함수는 Person Menu Extension이 클릭될 때 실행된다. 함수의 인수는 @@@ARGS@@@이어야 한다.
  
  

5. Finish를 클릭하고 PersonMenuExampleView.jsp를 저장한다.
   
   
6. PersonMenuExampleView.jsp를 Source 보기에 연다. Listing 11의 코드가 자동 생성된다.

<div class="com.ibm.portal.action" style="display: none"> 
  <span class="action-id">action_0</span> 
  <span class="action-impl">/javascript/TestAction.js</span>
  <span class="action-context">person</span>
  <span class="action-label">Test Action</span>
  <span class="action-description">This is a test action for adding 
    a Person Menu Extension </span> 
  <span class="action-showif">javascript:TestAction.showif</span>
  <span class="action-url">javascript:TestAction.execute(@@@ARGS@@@)</span> 
</div>

Person Menu Extension에 대한 JavaScript(앞에서 지정한 대로 TestAction.js)는 다음 디렉토리에 있어야 한다.

[WebSphere Portal Server Home]

\ui\wp.tagging.liveobject\semTagEar\Live_Object_Framework.ear\liveobjects.war\javascript

Listing 12에서는 TestAction.js의 샘플 컨텐츠를 보여 준다.

var TestAction = {
  showif: function(person) {return true;
  },
  execute: function(person) { alert("TestAction executed for: " + person.fn);
  }
}

이 코드는 새 Test Action 메뉴 항목이 선택될 때 경고를 생성한다.

WebSphere Portal에 포틀릿 애플리케이션 게시하기

이제 포틀릿 애플리케이션을 WebSphere Portal에 게시할 준비가 완료되었다.

1. PersonMenuExample 포틀릿 프로젝트를 마우스 오른쪽 단추로 클릭하고 Run on Server를 선택한다. 그림 30에서는 게시된 샘플의 모습을 보여 준다.

위로

포틀릿 애플리케이션에서 Ajax 프록시 사용하기

웹 페이지에서 Ajax를 사용하면 백그라운드에서 처리되는 비동기 요청을 사용하여 서버로부터 데이터 또는 마크업 조각을 로드할 수 있다. 따라서 이 요청은 브라우저에 현재 표시된 웹 페이지를 간섭하지 않는다.

Ajax 애플리케이션

Ajax를 사용하면 포틀릿 애플리케이션의 응답성과 사용 가능성을 크게 향상시킬 수 있다. 즉, 서버와 작은 양의 데이터를 교환하기 때문에 결과적으로 마크업의 일부만 새로 고쳐진다.

동일 출처 정책

Ajax 기반 웹 애플리케이션에서는 HTML 문서를 지원하는 서버 이외의 서버에 대한 Ajax 요청을 수행해야 하는 경우도 있다.

예를 들어, 다음과 같은 작업을 수행할 웹 애플리케이션을 설계하고 있다고 가정해 보자.

1. Google 제안, Yahoo 맞춤법 검사 등과 같은 외부 REST(Representational State Transfer) 서비스를 사용한다.
   
   
2. 인트라넷에서 사용할 수 있는 일부 원격 기업 REST 서비스를 사용한다.
   
   
3. 외부 서버(예: CNN)의 뉴스 피드를 포함한다.

XMP HTTP 요청의 제한 사항

한 서버에서 서비스되는 악의적 Ajax 코드가 사용자의 브라우저를 사용하여 다른 서버를 공격하는 것을 막기 위해 현재 문서를 서비스하는 서버에서만 요청이 허용된다(그림 31 참조). 이 동일 출처 정책은 클라이언트측 스크립트(특히, JavaScript)에서 다른 출처의 의심스러운 프로토콜, 도메인 이름 및 포트로부터 컨텐츠를 로드하는 것을 방지한다.

Ajax 프록시

동일 출처 정책 제한 사항을 해결하기 위해 WebSphere Portal에서는 서버측 HTTP 프록시를 기반으로 하는 해결 방법으로 Ajax 프록시 계층을 제공한다. Ajax 프록시 계층은 호출을 인터셉트하여 원격 사이트의 컨텐츠를 가져온다(그림 32 참조). 이러한 리소스를 중앙 서버에 캐시할 수도 있다. 이 보안 모델을 통해 관리자는 매우 유연한 방식으로 신뢰할 수 있는 출처에 대한 액세스를 제한할 수 있다.

샘플 애플리케이션

이 기사에서 설명하는 AjaxProxyPortletSample 애플리케이션은 XMLHttpRequests를 사용하여 외부 도메인에 액세스하는 포틀릿으로 구성되어 있다. 동일 출처 정책을 극복하기 위해 포틀릿에서는 Ajax 프록시 계층을 사용하여 이러한 도메인에 액세스한다.

1. 그림 33과 같이 드롭다운 상자에서 범주(Rational 또는 Lotus)를 선택한다.
   
   
2. 그런 다음 Get the articles 단추를 클릭한다. 포틀릿이 IBM 웹 사이트에서 developerWorks 기사에 관한 피드(Rational 또는 Lotus)를 가져와서 해당 주제에 대한 링크를 표시한다.

이 기사의 끝에 있는 다운로드를 통해 전체 샘플을 받아볼 수 있다. 이 기사에서는 Rational Application Developer의 Ajax 프록시 도구 지원에 대해 설명한다. 구현 관점에 대해서는 간략하게만 설명한다.

이후 섹션에서 설명하는 작업은 다음과 같다.

• 새 포틀릿 프로젝트에 대해 Ajax 프록시 지원을 설정한다.
  
  
• 프록시 서블릿을 웹 전개 디스크립터에 등록한다.
  
  
• Ajax 프록시 구성 매개변수를 지정한다.
  
  
• Ajax 프록시를 통해 XMP HTTP 요청을 보낸다.
  
  
• AjaxProxyPortletSample 애플리케이션을 WebSphere Portal에 게시한다.
  
  
• 기존 포틀릿 프로젝트에 대해 Ajax 프록시 지원을 설정한다.
  
  
• 기존 포틀릿 프로젝트에 대해 Ajax 프록시 지원을 해제한다.

새 포틀릿 프로젝트에 대해 Ajax 프록시 지원 설정하기

1. File > New > Project > Portlet Project를 선택하고 Next를 누른다. 그림 34와 같이 New Portlet Project 마법사가 표시된다.
   
   
2. AjaxProxyPortletSample을 포틀릿의 Name으로 입력한다.
   
   
3. WebSphere Portal 6.1을 Target Runtime으로 선택한다.
   
   
4. JSR 168 Portlet, JSR 286 Portlet 또는 IBM Portlet을 Portlet API로 선택한다.
   
   
5. Faces, Basic, Empty 또는 Struts를 Portlet type으로 선택한다.

6. Show Advanced Settings를 클릭한다. Project Facet 페이지가 표시된다.
   
   
7. 그림 35와 같이 Web 2.0 패싯을 펼치고 Ajax proxy 선택란을 선택한다. OK를 클릭한다.

8. Next를 누르고 Finish를 누른다.
   
   
9. 프록시 서블릿이 웹 전개 디스크립터에 등록된다. Web Content > WEB-INF 폴더를 펼치고 Web.xml을 두 번 클릭한다.
   
   
10. Web Deployment Descriptor가 표시된다. 그림 36과 같이 Servlet 탭을 클릭한다.

11. Ajax Proxy 서블릿이 클래스 이름 com.ibm.wps.proxy.servlet.ProxyServlet으로 Web.xml에 등록되었다.

(참고: 인증이 필요한 리소스에 액세스해야 하는 경우에는 보안 제약과 연관된 두 번째 서블릿 맵핑을 지정할 수 있다. 새 서블릿 맵핑을 지정하려면 위의 그림 36과 같이 URL Mappings 섹션의 Add 단추를 클릭한다. 이렇게 하면 Add Servlet Mapping 대화 상자가 호출된다.)

12. Web Deployment Descriptor 보기의 Source 탭을 클릭하여 Listing 13과 같은 코드가 Web.xml에 추가된 것을 볼 수 있다.

<servlet>
  <servlet-name>ProxyServlet</servlet-name>
  <servlet-class>com.ibm.wps.proxy.servlet.ProxyServlet</servlet-class>
</servlet> 

<servlet-mapping>
  <servlet-name>ProxyServlet</servlet-name>
  <url-pattern>/proxy/*</url-pattern>
</servlet-mapping>

13. Ajax 프록시 구성 파일이 작성된다. 그림 37과 같이 Web Content > WEB-INF 폴더를 펼친다.

14. proxy-config.xml을 두 번 클릭하여 Ajax Proxy Configuration Editor 창을 연다(그림 38 참조).

15. proxy-config.xml을 사용하여 Ajax 프록시 구성 매개변수를 지정할 수 있다. 먼저 그림 39와 같이 항목을 프록시 규칙에 추가할 수 있다.

컨텍스트 경로 맵핑

맵핑 요소는 컨텍스트 경로를 기반으로 수신 요청을 대상 URL에 맵핑하는 데 사용된다. 따라서 그림 40과 같이 각 맵핑 요소는 contextpath 속성(및 선택적으로 URL 속성)을 지정해야 한다.

액세스 정책

정책 요소는 그림 41과 같이 특정 URL에 대한 액세스 정책을 정의하는 데 사용되며 다음과 같은 하위 요소를 포함한다(그림 42 참조).

• Actions
  
  
• HTTP Headers
  
  
• Mime-types
  
  
• Cookies
  
  
• Users

일반 구성 매개변수

다음과 같은 HTTP 관련 매개변수를 지정할 수 있다.

• Socket-timeout
  
  
• Retries
  
  
• Max-total-connections
  
  
• Max-connections-per-host

XML HTTP 요청 보내기

proxy-config.xml 파일에 Listing 14와 같은 컨텍스트 맵핑이 작성되어 있다고 가정하자.

<proxy:mapping contextpath="/proxy" url="*"/> 

컨텍스트 경로: /proxy

URL: *

이제 프록시 서블릿을 통해 http://www.ibm.com/developerworks/myfeed.rss 사이트의 응답을 받으려면 다음 URL을 생성하여 XHR 요청을 작성해야 한다.

http://www.myhostname.com/wps/myapplication/proxy/http/www.ibm.com/developerworks/myfeed.rss

이 전체 URL에는 URL http://www.ibm.com/developerworks/myfeed.rss의 인코딩된 경로가 있다. (즉, http:// 부분이 http/로 변경되었다.)

Listing 15와 같은 함수를 작성하여 JavaScript 파일에서 이 인코딩을 수행할 수 있다.

encodeURL: function(url) { 
  return url.replace(/:\/\//, "/"); 
} 

이 함수를 실행하면 Listing 16과 같은 컨텍스트 맵핑이 생성된다.

<proxy:mapping contextpath="/dw" url="http://www.ibm.com/developerworks/*"/> 

컨텍스트 경로: /dw

URL: http://www.ibm.com/developerworks/*

이 경우 프록시 서블릿을 통해 http://www.ibm.com/developerworks/myfeed.rss 사이트의 응답을 받으려면 다음 URL을 생성하여 XHR 요청을 작성해야 한다.

http://www.myhostname.com/wps/myapplication/dw/myfeed.rss

AjaxProxyPortletSample의 proxy.js 파일에는 다음과 같은 작업을 수행하는 코드가 있다.

• URL을 인코딩한다.
  
  
• 이 URL에 대한 XHR 오브젝트를 생성한다.
  
  
• XHR 요청을 서버에 보낸 후 응답을 로드한다.
  
  
• 응답을 구문 분석하여 AjaxProxyPortletSampleView.jsp 파일에 표시한다.

JavaScript 파일의 전체 컨텐츠를 보려면 AjaxProxyPortletSample에서 Web Content > JS 폴더를 펼치고 proxy.js를 연다.

WebSphere Portal에 포틀릿 애플리케이션 게시하기

1. AjaxProxyPortletSample을 마우스 오른쪽 단추로 클릭AjaxProxyPortletSample하고 Run on Server를 선택한다.
   
   

2. 프로젝트가 게시되면 드롭다운 목록에서 범주(Rational 또는 Lotus)를 선택한다.
   
   

3. 그런 다음 Get the articles를 클릭한다. 이에 대한 응답으로 선택한 범주의 최신 주제에 대한 링크가 샘플에 표시된다.

Get the articles 단추를 클릭하여 선택한 주제(Rational 또는 Lotus)에 해당하는 URL을 사용하여 XMLHttpRequest 오브젝트가 작성된다. 그런 다음 이 요청은 ProxyServlet에게 전달된다. ProxyServlet은 요청을 대상 서버에게 위임하고 응답을 검색한 후 마지막으로 XML 응답을 클라이언트 브라우저에게 리턴한다. 그런 다음 JavaScript가 이 응답을 구문 분석하여 그림 43과 같이 사용자에게 친숙한 형태로 표시한다.

기존 포틀릿 프로젝트에 대해 Ajax 프록시 지원 설정하기

1. 프로젝트를 마우스 오른쪽 단추로 클릭하고 Properties > Project Facets를 선택한다. Project Facet 창이 표시된다.
   
   
2. Web 2.0을 펼치고 Ajax proxy 선택란을 선택한 후 OK를 클릭한다.

기존 포틀릿 프로젝트에 대해 Ajax 프록시 지원 해제하기

1. 프로젝트를 마우스 오른쪽 단추로 클릭하고 Properties > Project Facets를 선택한다. Project Facet 창이 표시된다.
   
   
2. Project Facets 페이지에서 Ajax proxy에 대한 선택을 취소하고(그림 44 참조) OK를 누른다.
   
   
3. proxy-config.xml이 WEB-INF 폴더에서 삭제되고 ProxyServlet 항목이 Web.xml에서 삭제되었는지 확인한다.

위로

WebSphere Portal에서 클라이언트측 프로그래밍 모델 사용하기

이전 버전의 WebSphere Portal에서는 포틀릿 작업을 수행할 때마다 하나의 요청을 서버에 보내야 한다. 예를 들어, 포틀릿 창 상태를 최소화 또는 최대화로 변경한 경우 제출 요청을 서버에 보낸 후 브라우저에서 응답을 받아야 한다. 이렇게 하면 페이지 새로 고침이 발생하며 결과적으로 포틀릿은 최대화 또는 최소화된 상태로만 표시된다. 일반적으로 이러한 유형의 서버측 작업을 수행하게 되면 서버에 대한 왕복 시간이 반복해서 발생한다.

이 유형의 서버 트래픽을 줄이기 위해 WebSphere Portal에서는 이제 포틀릿 상태 변경을 클라이언트측에서 효율적으로 수행할 수 있는 클라이언트측 프로그래밍 모델을 지원한다.

이 목표를 달성하기 위해 Rational Application Developer에서는 클라이언트측 프로그래밍 모델에 필요한 도구 지원을 제공한다.

이후 섹션에서 설명하는 내용은 다음과 같다.

1. 클라이언트측 프로그래밍 모델 지원을 사용하는 포틀릿 프로젝트를 작성한다.
   
   
2. 클라이언트측 프로그래밍 모델 지원을 사용하여 기본 포틀릿 프로젝트의 포틀릿 환경 설정을 검색한다.
   
   
3. WebSphere Portal에 포틀릿 애플리케이션을 게시한다.

새 포틀릿 프로젝트에 대한 클라이언트측 프로그래밍 모델 지원

다음 단계를 수행하여 클라이언트측 프로그래밍 모델 지원을 사용하는 포틀릿 프로젝트를 작성한다.

1. File > New > Project > Portlet Project를 선택하고 Next를 누른다. New Portlet Project 마법사가 표시된다.
   
   
2. ClientSideSample을 포틀릿의 Name으로 입력한다.
   
   
3. WebSphere Portal 6.1을 Target Runtime으로 선택한다.
   
   
4. JSR 168 Portlet 또는 JSR 286 Portlet을 Portlet API로 선택한다.
   
   
5. Basic을 Portlet type으로 선택한다.
   
   
6. Next를 세 번 누른다. 그림 45와 같은 Advanced Settings 페이지가 표시된다.

7. Web2.0 Portlet Feature 그룹 아래의 Client Side Capabilities 선택란은 기본적으로 선택되어 있다. 이 선택란을 선택하면 새 포틀릿 프로젝트에 대한 클라이언트측 프로그래밍 모델 지원이 설정된다. Finish를 클릭한다.

ClientSideSample 포틀릿 프로젝트가 작성되고 ClientSideSampleView.jsp가 Page Designer에 열린다.

삽입된 코드를 보려면 Source 탭을 클릭한다(Listing 17 참조).

<%@ taglib
  uri=http://www.ibm.com/xmlns/prod/websphere/portal/v6.1/portlet-client-model
  prefix="portlet-client-model" %>

<portlet-client-model:init>
  <portlet-client-model:require module="ibm.portal.xml.*"/>
  <portlet-client-model:require module="ibm.portal.portlet.*"/>
</portlet-client-model:init> 

Listing 18에 있는 taglib가 ClientSideSampleView.jsp 파일에 추가된다.

<%@taglib
  uri="http://www.ibm.com/xmlns/prod/websphere/portal/v6.1/portlet-client-model" 
  prefix="portlet-client-model" %> 

Listing 19의 태그도 JSP(Java™Server Page) 파일에 추가된다.

<portlet-client-model:init>
  <portlet-client-model:require module="ibm.portal.xml.*"/>
  <portlet-client-model:require module="ibm.portal.portlet.*"/>
</portlet-client-model:init> 

의미는 다음과 같다.

• taglib에는 클라이언트의 필수 모듈을 사용하는 데 필요한 마크업 및 아티팩트가 있다.
  
  
• ibm.portal.portlet.* 모듈은 클라이언트에서 PortletWindow, PortletPreference, PortletState 및 XMLPortletRequest를 사용하는 데 필요하다.
  
  
• ibm.portal.xml.* 모듈은 클라이언트에서 XSLT와 XPath를 사용하는 데 필요하다.

클라이언트측 프로그래밍 모델 지원을 사용하여 기본 포틀릿 프로젝트의 포틀릿 환경 설정 검색하기

이제 그림 46과 같이 클라이언트측 프로그래밍 모델 지원을 사용하여 클라이언트측의 포틀릿 환경 설정을 검색하는 방법을 살펴본다. 이 작업은 서버측에서 발생한다. 앞에서 작성한 ClientSideSample 프로젝트를 계속 사용한다.

1. Portlet Deployment Descriptor를 연다.
   
   
2. Portlets 탭을 클릭하고 포틀릿(ClientSideSample)을 선택한다.
   
   
3. Persistent Preference Store 섹션으로 이동하여 환경 설정을 추가하고 MyPreference라는 이름을 지정한다.
   
   
4. 이 환경 설정에 값을 제공한다.

5. ClientSideSampleView.jsp 파일을 연다.
   
   
6. Page Data 보기를 연다.
   
   
7. Page Data 보기를 펼치고 PortletPreferences 노드를 선택한다.
   
   
8. 그림 47과 같이 Preferences 노드를 마우스 오른쪽 단추로 클릭하고 New > PortletPreferences를 선택한다.

9. 그림 48과 같이 Add Attribute 대화 상자에서 새 환경 설정 변수를 작성한다. Portlet Deployment Descriptor에서 작성한 환경 설정에 지정한 것과 같은 이름을 이 환경 설정에 지정한다. 즉, MyPreference라는 이름을 지정한다.

10. ClientSideSampleView.jsp를 연다.
    
    
11. 그림 49와 같이 Page Data 보기의 PortletPreferences 노드 아래에 있는 MyPreference를 끌어서 ClientSideSampleView.jsp에 놓는다.

그림 50과 같이 Insert Java Bean 대화 상자가 표시된다.

12. Finish를 누른다.
    
    
13. 삽입된 코드를 보려면 Source 탭을 클릭한다(Listing 20 참조).

<script type="text/javascript"> 
 var preferenceJSONObject= {"bindings": [{
  "pref":"MyPreference","id":"ibm__pref_MyPreference_uq_1"} 
  ] 
}; 
function <portlet:namespace/>_getPref(portletWindow, status, portletPrefs) { 
if (status==ibm.portal.portlet.PortletWindow.STATUS_OK) {
  portletWindow.setAttribute("preferences", portletPrefs); 
  var portletPref_ =portletPrefs;
  var len = preferenceJSONObject.bindings.length; 
  for(var i=0; i<len ; i++) 
  {
  var pref = preferenceJSONObject.bindings[i].pref; 
  var pref_val = portletPref_.getValue(pref,"");
  document.getElementById(preferenceJSONObject.bindings[i].id).innerHTML=pref_val;
  } 
  } 
  else { alert("error loading feed"); } 
  } 
function callOnLoad(){
  <portlet:namespace/>_portletWindow =new ibm.portal.portlet.PortletWindow 
    ("<%=portletWindowID%>");
  <portlet:namespace/>_portletWindow.getPortletPreferences(<portlet:namespace/>_getPref);
} 
dojo.addOnLoad(callOnLoad);
</script> 

위의 자동 생성된 코드는 클라이언트측의 포틀릿 환경 설정을 검색한다.

참고: 자동 생성된 코드에는 올바르지 않은 dojo_101.addOnLoad(callOnLoad);가 들어 있을 수 있으며 올바른 코드는 dojo.addOnLoad(callOnLoad);이다.

잘못된 코드가 JSP에 생성된 경우에는 수동으로 수정해야 한다. 그래야만 WebSphere Portal에 게시했을 때 애플리케이션이 올바르게 실행된다.

Listing 21에서는 preferenceJSONObject의 컨텐츠를 보여 준다.

var preferenceJSONObject= {"bindings": [
  {"pref":"MyPreference","id":"ibm__pref_MyPreference_uq_1"} 
  ]
};

Listing 22의 HTML 코드도 Source 보기에 추가된다.

<table>
  <tbody> 
    <tr> 
      <td align="left">MyPreference:</td> 
      <td> 
      <div id="ibm__pref_MyPreference_uq_1"></div>
      </td> 
    </tr> 
  </tbody>
</table> 

14. 이와 마찬가지로 Portlet Deployment Descriptor에서 값을 지정하여 또 다른 환경 설정(MyPreference2)을 추가한 후 Page Data 보기에서 동일한 환경 설정을 추가할 수도 있다(앞에서 MyPreference를 추가할 때와 동일한 방법 사용).
    
    
15. Design 보기를 연다. 앞에서 했던 것처럼 이 환경 설정을 JSP로 끌어 놓는다.
    
    
16. 이제 Source 보기를 연다.

Listing 23처럼 preferenceJSONObject 컨텐츠가 업데이트된 것을 볼 수 있다.

var preferenceJSONObject= {"bindings": [
  {"pref":"MyPreference2","id":"ibm__pref_MyPreference2_uq_1"},
  {"pref":"MyPreference","id":"ibm__pref_MyPreference_uq_1"} 
  ] 
}; 

WebSphere Portal에 포틀릿 애플리케이션 게시하기

1. ClientSideSample Portlet 프로젝트를 마우스 오른쪽 단추로 클릭하고 Run on Server를 선택한다.
   
   
2. 그림 51과 같이 Portlet Deployment Descriptor Preference Store에서 지정한 환경 설정 값이 올바르게 표시되는 모습을 볼 수 있다.

위로

살펴본 내용

Rational Application Developer에서 제공하는 도구를 사용하면 응답성이 높고 다양한 기능을 갖춘 대화식 포틀릿 및 포털 기반 애플리케이션을 쉽게 개발할 수 있다. 이러한 애플리케이션에서는 클라이언트측 프로그래밍 모델, 클라이언트측 C2A, Person Menu, Person Menu Extension 및 Ajax 프록시를 활용한다. 따라서 개발자는 애플리케이션의 요구 사항에 따라 생성된 코드를 사용자 정의하기만 하면 된다.

참고자료

• IBM WebSphere Portal 버전 6.1 Information Center에서 계획, 설치, 구성, 관리, 개발 및 문제점 해결에 대한 정보를 볼 수 있다.
  
  
• IBM Rational Application Developer Version 7.5 Information Center에서 자세한 정보를 살펴볼 수 있다.
  
  
• developerWorks의 Rational 소프트웨어 영역에서 Rational Software Delivery Platform 제품과 관련된 기술 자료와 베스트 프랙티스를 볼 수 있다.
  
  
• Rational Application Developer Version 7.5 Information Center에서 자세한 정보를 살펴볼 수 있다.
  
  
• 1주일 동안의 developerWorks 튜토리얼, 기사, 다운로드, 커뮤니티 활동, 웹 캐스트, 이벤트 등에 대한 소식을 전하는 IBM developerWorks 뉴스레터를 구독하자.
  
  
• developerWorks Rational 영역 뉴스레터를 구독하여 developerWorks Rational 컨텐츠를 받아볼 수 있다. 격주로 제공되는 이 뉴스레터는 Rational Software Delivery Platform과 관련된 최신 기술 리소스 및 베스트 프랙티스에 대한 업데이트를 담고 있다.
  
  
• 효과적인 소프트웨어 개발에 필요한 개념에 대한 기사를 제공하는 Rational Edge 뉴스레터를 구독하자.
  
  
• 기술 서점에서 다양한 기술 주제와 관련된 서적을 살펴보자.
  
  

• IBM Rational 시험판 소프트웨어를 다운로드하자.
  
  

• 포럼에 참여하기.
  
  
• developerWorks 커뮤니티에서 제공하는 포럼, 블로그, 팟캐스트, wiki 등에 참여하자.

필자소개

		Charu Malhotra는 Rational Application Developer의 포털 및 포틀릿 도구 구성 요소를 개발한 소프트웨어 엔지니어이며 JSF 포틀릿을 위한 Web 2.0 도구 지원 및 브리지 지원 업무를 맡고 있다. 인도 델리의 IBM Labs에서 근무하고 있다.

기사에 대한 평가

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

이 문서 북마킹 하기 mar.gar.in naver eolin del.icio.us