Sun Developer Network 공식 블로그

포털이란 사용자가 사용자 환경에 맞게 정의할 수 있는 개별 웹 애플리케이션을 포함하는 웹 페이지입니다. 예를 들면, My Yahoo는 포털 페이지입니다. 포털은 단일 사인 온(SSO), 사용자 정의, 컨텐트 통합 및 현지화 등의 부가 가치 서비스를 제공합니다.

포털 페이지에 추가되는 개별 웹 애플리케이션을 포틀릿이라 합니다. 포틀릿은 JSR 168 사양 및 JSR 286을 기반으로 하는 자바 기술 웹 구성 요소로써 WSRP(Web Service for Remote Portlets)를 포함합니다. 동적 컨텐츠를 제공하는 포틀릿 컨테이너가 포틀릿을 관리합니다. 포털은 RSS 피드, 정해진 지역의 현재 날씨와 같은 서비스 매시업 또는 하이퍼링크 그룹과 같은 정적 컨텐츠까지 원하는 컨텐츠를 사용자에게 제공하는 플러그형 사용자 인터페이스 구성 요소로써 포틀릿을 사용합니다.

이전에는 포틀릿을 만드는 것이 복잡한 프로세스였습니다. 이제, NetBeans IDE 6.0과 OpenPortal 포틀릿 컨테이너 2.0 베타 2를 사용하여 쉽고 빠르게 포틀릿을 만들고 테스트할 수 있습니다. 서버에 포틀릿을 배포하는 것도 간단합니다.

이 기사에서는 NetBeans IDE의 드래그 앤 드롭 위젯을 통해 포틀릿을 만들고 동적 컨텐츠를 제공하는 방법을 보여줍니다. 이 기사의 포틀릿 예제는 jMaki Tabbed View 위젯을 사용하여 RSS 피드를 가져오고 New to Java Programming Center의 정적 링크를 사용합니다.

포틀릿을 만들고 테스트하려면 컴퓨터에 다음 소프트웨어를 설치해야 합니다.

• 자바 SE 6 이상
• NetBeans IDE 6.0 이상
• 2008년 1월 2일자 OpenPortal 포틀릿 컨테이너 2.0 베타 2. NetBeans IDE와는 별도로 다운로드합니다.
• GlassFish 애플리케이션 서버. NetBeans IDE 6.0 이상에서 번들되어 있으므로 별도로 다운로드할 필요가 없습니다.

OpenPortal 포틀릿 컨테이너 2.0 베타 2의 설치 지침은 설치 페이지를 참조하십시오. 다음 단계를 시작하기 전에 OpenPortal 포틀릿 컨테이너를 다운로드 받아 설치해야 합니다.

포틀릿 컨테이너는 서블릿 컨테이너와 유사하게 작동합니다. 포틀릿 컨테이너는 다음을 수행합니다.

• 포틀릿의 런타임 환경 제공
• 포틀릿의 수명 주기 관리
• 포틀릿 기본 설정을 위한 영구적 스토리지 제공
• 포틀릿 캐싱
• 포틀릿에서 요청을 수행하기 위해 포털에서 요청 수신

필요한 소프트웨어를 설치하면 NetBeans IDE를 시작합니다. 그런 다음, 아래 단계에 따라 포틀릿과 포틀릿 컨테이너 플러그인을 설치합니다.

1. 주 메뉴에서 Tools로 이동합니다.
2. Plug-ins를 선택합니다.
3. Available Plug-ins 탭을 클릭합니다.
4. Portlets, OpenPortal Portlet Container, jMaki Ajax Support 상자를 선택합니다.
5. Install 버튼을 클릭하고 지침을 따릅니다. 설치 프로세스 완료 전에 몇 가지 라이센스를 수락해야 할 수 있습니다.

마지막으로 OpenPortal 포틀릿 컨테이너 서버를 추가합니다.

1. 주 메뉴에서 Tools로 이동합니다.
2. Servers를 선택합니다.
3. Add Server를 클릭합니다.
4. 목록에서 OpenPortal Portlet Container 2.0을 선택합니다.
5. Next를 클릭합니다.
6. Browse를 사용하여 GlassFish 애플리케이션 서버를 설치할 위치를 설정합니다. NetBeans IDE가 GlassFish 애플리케이션 서버를 설치한 곳을 찾기 위해 시스템을 따로 검색해야 할 수도 있습니다.
7. OK를 클릭합니다.

포틀릿을 만들 준비가 되었습니다.

NetBeans IDE에서 애플리케이션을 생성할 때와 마찬가지로 File > New Project로 가서 Web > Web Application을 선택하고 Next를 클릭합니다. 프로젝트 이름으로 New2JavaPortlet을 입력합니다. Server 드롭다운 메뉴에서 OpenPortal Portlet Container 2.0 Beta를 선택한 다음, Next를 클릭합니다. 다음 화면에서 jMaki Ajax Framework 상자를 선택합니다. 창의 하단에서 레이아웃을 선택할 수 있습니다. 끝까지 스크롤하여 No CSS Style을 선택합니다.

마지막으로 화면 상단에서 Portlets Support를 선택합니다. Portlet Version 드롭다운 메뉴를 사용하여 2.0을 선택한 다음, Create Portlet 상자를 선택합니다. Portlet Class Name에 New2JavaPortlet을 입력합니다. 프로젝트 이름과 포틀릿 이름은 같아야 합니다. 다른 필드는 자동으로 입력됩니다. Finish를 클릭합니다.

포틀릿이 컨테이너 내에서 설정되는 방식 때문에 표시된 index.jsp 페이지는 필요하지 않습니다. 화면 왼쪽의 Projects 탭 아래에 index.jsp가 나열됩니다. index.jsp를 마우스 오른쪽 버튼으로 클릭하고 Delete를 선택합니다. 작업할 파일의 이름은 New2JavaPortlet_view.jsp입니다. WEB-INF 디렉토리를 확장한 후에 jsp 디렉토리를 확장하여 파일을 찾을 수 있습니다. 그림 1과 같이 파일 이름 New2JavaPortlet_view.jsp를 더블 클릭합니다. 파일이 작업 공간에 열립니다.

그림 1. 파일 열기

포틀릿 프로젝트만 만들었지만 NetBeans IDE는 이미 필수 클래스도 만들었습니다. Projects 탭에서 Source Packages를 확장합니다. 그런 다음, com.text를 확장하고 New2JavaPortlet.java 파일을 더블 클릭하여 엽니다.

New2JavaPortlet은 모드를 기반으로 포틀릿을 표시하기 위해 더욱 구체적인 메소드의 호출을 위임하며 render() 메소드를 구현하는 제공된 GenericPortlet 클래스를 확장합니다. 개발자는 GenericPortlet을 확장하고 포틀릿에 필요한 만큼 여러 개의 특화된 render 메소드를 구현할 수 있습니다.

• 포틀릿이 View 모드일 때 render()가 호출하는 doView(). 포틀릿의 View 페이지를 표시하는 로직을 포함합니다.
• 포틀릿이 Edit 모드일 때 render()가 호출하는 doEdit(). 포틀릿의 Edit 페이지를 표시하는 로직을 포함합니다.
• 포틀릿이 Help 모드일 때 render()가 호출하는 doHelp(). 포틀릿의 Help 페이지를 표시하는 로직을 포함합니다.

New2JavaPortlet이 이들 메소드를 호출하여 각각에 해당하는 페이지를 찾습니다. 이 기사에서는 드래그 앤 드롭 위젯과 몇 가지 HTML 코드를 사용하여 View 페이지에 포틀릿의 컨텐츠를 넣습니다. 다른 클래스를 위해 이 GenericPortlet 클래스를 확장할 수 있습니다. 나중에 돌아가 Edit 또는 Help 페이지를 수정할 수도 있습니다. New2JavaPortlet 클래스에서 본 후에는 닫을 수 있습니다.

포틀릿을 빌드하고 실행하면 브라우저는 New2JavaPortlet_view.jsp를 표시합니다. 현재 이 페이지는 정적 텍스트 New2JavaPortlet - VIEW MODE만 포함하고 있습니다. 이 페이지는 JSP(JavaServer Pages) 기술 페이지이므로 원하는 스크립트나 JSP 태그 라이브러리를 추가하고 다른 JSP 페이지처럼 다룰 수 있습니다.

컨텐츠를 추가하기 전에 포틀릿 환경을 테스트합니다. 주 메뉴에서 Build를 클릭하고 Build Main Project를 선택합니다. 빌드가 성공적으로 완료되면 주 메뉴로 이동하여 Run을 클릭합니다. Run Main Project를 선택합니다. 애플리케이션 서버가 시작되고 포틀릿 컨테이너가 시작되며 브라우저 창이 열리므로 약간 시간이 걸립니다. 그림 2와 같이 나타나야 합니다.

그림 2. 포틀릿 실행

포틀릿 프로젝트 이름이 포틀릿의 이름과 같아야 합니다. 개발 및 테스트 환경이 제대로 작동하는지 확인한 후에는 New2JavaPortlet_view.jsp 페이지의 정적 텍스트를 대체할 컨텐츠를 추가할 수 있습니다. 포틀릿에 변경한 내용을 보려면 다음 섹션의 설명과 같이 포틀릿을 배포 해제 및 배포합니다.

이 포틀릿에는 여러 가지 컨텐츠가 포함되므로 탭 창을 사용하여 웹 페이지의 작은 영역으로 컨텐츠를 구성합니다. 물론 다른 레이아웃을 선택할 수 있지만 이 예제에서는 Tabbed View라는 jMaki 위젯을 사용합니다. 화면 오른쪽에는 드래그 앤 드롭이 가능한 여러 가지 위젯이 있습니다. jMaki Yahoo 위젯 목록이 그림 3과 같이 확장되었는지 확인합니다.

그림 3. jMaki Yahoo 위젯

작업 공간 페이지 내에서 그림 3에 강조 표시된 New2JavaPortlet - VIEW MODE라는 정적 텍스트를 삭제합니다. 굵은 글꼴을 위한 HTML 코드 <b></b>도 삭제합니다. 그림 3에 흰색으로 강조 표시된 Tabbed View 위젯을 팔레트에서 페이지로 드래그하여 텍스트를 삭제한 곳에 드롭합니다. Tabbed View 위젯을 페이지로 드롭하면 페이지에 다음 코드가 나타납니다.

<a:widget name="yahoo.tabbedview"
   value="{items:[
           {label : 'My Tab', content : 'Some Content'},
           { id : 'bar', label : 'My Tab 2', include : 'test.jsp ', lazyLoad : true },
           {label : 'My Tab 3', content : 'More Content',  selected : true}
          ]
         }" />

jMaki 위젯을 페이지로 드래그 앤 드롭하면 resources 디렉토리에 위젯을 빌드하기 위해 필요한 모든 파일이 생성됩니다.

이 위젯이 작동하는 방법을 이해하려면 파일을 저장합니다. 그런 다음, Projects 창에서 프로젝트 이름을 마우스 오른쪽 버튼으로 클릭하고 Undeploy and Deploy를 선택합니다. 빌드되면 프로젝트를 실행합니다. 주 메뉴로 가서 Run을 클릭하고 Run Main Project를 선택합니다. 프로젝트를 실행하면 변경 사항이 브라우저 창에 나타납니다. Tabbed View 창의 각 탭을 클릭합니다. My Tab 2 탭에는 test.jsp 파일이 로드되지 않습니다. test.jsp는 만들어지지 않았기 때문이지만 창에 표시하기 위해 JSP 페이지를 호출하는 방법을 보여줍니다.

New2JavaPortlet에 대해 위젯이 호출하는 새 JSP 페이지를 만들게 됩니다. 이들 각 페이지는 각 탭의 컨텐츠를 제공합니다. New2JavaPortlet_view.jsp 페이지에서 위에 나온 코드를 다음 코드로 교체합니다.

<a:widget name="yahoo.tabbedview"
   value="{items:[
           { id : 'bar', label : 'Popular & New', include : '/New2JavaPortlet/whatsnew.jsp ', selected : true },
           { label : 'Java Fundamentals', include : '/New2JavaPortlet/fundamentals.jsp ', lazyLoad : true },
           { label : 'Downloads', include : '/New2JavaPortlet/downloads.jsp ', lazyLoad : true },
          ]
         }" />

이 코드는 whatsnew.jsp, fundamentals.jsp, downloads.jsp JSP 페이지를 호출합니다.

다음 단계는 이들 페이지를 만드는 것입니다. Projects 창에서 그림 4와 같이 Web Pages를 마우스 오른쪽 버튼으로 클릭합니다. 그런 다음, New를 선택하고 마지막으로 JSP를 선택합니다. 포틀릿 컨테이너가 New2JavaPortlet_view.jsp에 대해 만든 jsp 디렉토리가 아니라 Web Pages 디렉토리에 이들 파일을 저장하는 것에 유의하십시오. 만든 모든 JSP 페이지는 그림 4와 같이 Web Pages 디렉토리에 저장되어야 합니다.

그림 4. 새 JSP 페이지 만들기

이 방법으로 3개의 JSP 페이지를 만들고 각각 whatsnew, fundamentals, downloads라고 명명합니다. NetBeans IDE는 자동으로 .jsp 확장자를 추가하므로 파일 이름에 확장자를 포함하지 않습니다.

그런 다음, Undeploy and Deploy를 다시 실행합니다. 그리고 Run 메뉴를 클릭하고 Run Main Project를 선택합니다. 이번에는 탭 이름이 변경되었습니다. 각 탭 이름을 클릭하면 코드를 교체했기 때문에 지금 만든 JSP 페이지가 나옵니다. 이들 각 JSP 페이지(downloads.jsp, fundamentals.jsp, whatsnew.jsp)를 열고 다음 섹션에 설명된 것과 같이 컨텐츠를 추가합니다.

이 페이지는 간단한 정적 컨텐츠와 제목, 링크 목록을 포함합니다. 페이지 상단에 표시되는 처음 두 줄의 코드는 변경하지 마십시오.

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

나머지 HTML 코드는 다음과 같이 교체합니다.

<h3>Downloads for New Developers</h3>

<ul>
  <li><a href="http://java.sun.com/javase/downloads/i">Java SE (JDK)</a>
  <li><a href="http://www.netbeans.org/">NetBeans IDE</a>
  <li><a href="http://www.mysql.com">MySQL Database</a>
</ul>

이 페이지는 RSS 피드를 가져와 동적 컨텐츠를 제공합니다. 마찬가지로 처음 두 줄의 코드를 남기고 나머지 HTML 코드를 삭제합니다. 그런 다음, 그림 5와 같이 화면 오른쪽의 jMaki 위젯 팔레트에서 Block List 위젯을 페이지로 드래그 앤 드롭합니다.

그림 5. 팔레트의 Block List

페이지에 다음 코드가 나타나야 합니다.

<a:widget name="jmaki.blockList" value="[
{ title : 'jMaki Project Home', link : 'https://ajax.dev.java.net', description : 'Where to go for the latest jMaki.' },
{ title : 'jMaki Widgets Home', link : 'https://widgets.dev.java.net', description : 'The source for the latest jMaki widgets.' },
{ title : 'jMaki-Charting Home', link : 'https://jmaki-charting.dev.java.net', description : 'Enables complex charts rendered on the client in any modern browser.' }
]"  />

위젯은 위치 지정자 텍스트만 제공합니다. 전체를 다음 코드로 교체합니다.

<h3>Java Technology Fundamentals</h3>

<a:widget name="jmaki.blockList" service="/xhp?id=rss"  />

RSS 피드와 같이 외부 서비스의 데이터로 위젯을 채우려면 value 속성을 service="/xhp?id=rss"로 교체해야 합니다. 페이지가 jMaki 위젯으로 구성된 경우, jMaki 런타임이 애플리케이션에 번들되어 제공됩니다. 런타임은 애플리케이션 컨텍스트 내에서 /xhp URL 패턴으로 매핑하는 jmaki.xhp.XmlHttpProxyServlet 클래스로 구성됩니다.

URL에 지정된 식별자 또는 ID인 rss는 xhp.json이라는 구성 파일에 구성됩니다. 이 파일은 페이지의 위젯이 액세스할 수 있는 기본 외부 서비스의 목록으로 구성됩니다. 다섯 가지 매개 변수를 사용하여 xhp.json 파일의 각 항목을 지정할 수 있습니다.

• ID: 항목의 고유한 식별자인 필수 매개 변수입니다.
• URL: 외부 서비스의 위치를 제공하는 필수 매개 변수입니다.
• 매개 변수: URL로 전달하는 기본 값을 지정하는 선택 매개 변수입니다.
• API 키: 특정 키로 서비스를 호출하는 선택 매개 변수입니다.
• 스타일시트: 응답을 처리하기 위한 선택 매개 변수입니다.

그런 다음, xhp.json 파일을 변경해야 합니다. Projects 탭으로 이동하여 resources 디렉토리를 확장합니다. xhp.json 파일을 더블 클릭하고 페이지 하단으로 스크롤합니다. xhp.json 파일에서 다음 코드를 검색합니다.

{"id": "rss",
      "url":"http://weblogs.java.net/blog/ludo/index.rdf",
      "xslStyleSheet": "rss.xsl"
  }

그러나 이 기사의 의도는 Ludovic Champenois의 블로그를 가져오는 것이 아닙니다. 따라서 URL을 http://weblogs.java.net/blog/ludo/index.rdf에서 http://blogs.sun.com/JavaFundamentals/feed/entries/rss로 변경합니다.

또한 whatsnew.jsp 페이지의 다른 피드를 가져올 것이므로 다음 코드의 단편(snippet)에 나온 것과 같이 코드의 URL을 변경합니다. 새로운 URL은 빨간색으로 강조 표시됩니다.

{"id": "rss2",
      "url":"http://blogs.sun.com/new2javaUpdates/feed/entries/rss",
      "xslStyleSheet": "rss.xsl"
   }

가져올 두 번째 RSS 피드의 ID 이름은 rss2입니다. 또한 블로그에서 URL은 New to Java Programming Center의 "What's New" 섹션에서 가져오는 것에 유의하십시오. xhp.json 파일을 저장합니다. 두 번째 피드를 가져오는 코드 블록을 추가했으므로 첫 번째 블록의 닫는 중괄호(})뒤에 쉼표로 둘을 구분해야 합니다. 다음 코드의 단편(snippet)은 네 번째 줄에 빨간색으로 추가된 쉼표를 보여줍니다.

    {"id": "rss",
      "url":"http://blogs.sun.com/JavaFundamentals/feed/entries/rss",
      "xslStyleSheet": "rss.xsl"
     },
    {"id": "rss2",
      "url":"http://blogs.sun.com/new2javaUpdates/feed/entries/rss",
      "xslStyleSheet": "rss.xsl"
     }

whatsnew.jsp 페이지로 이동하여 HTML 코드를 삭제합니다. 다음 정적 HTML 코드를 추가합니다.

<h3>What's Popular</h3>

<ul>
  <li><a href="http://java.sun.com/docs/books/tutorial/">The Java Tutorial</a></li>
  <li><a href="http://blogs.sun.com/JavaFundamentals/">Java Technology Fundamentals</a></li>
  <li><a href="http://blogs.sun.com/CoreJavaTechTips/">Core Tech Tips</a></li>
  <li><a href="http://java.sun.com/developer/onlineTraining/tools/netbeans/">Easy Web Site Creation in the NetBeans IDE</a></li>
  <li><a href="http://java.sun.com/javaee/5/docs/tutorial/doc/">The Java EE 5 Tutorial</a></li>
</ul>

<h3>What's New</h3>

그런 다음, 화면 오른쪽의 jMaki Widgets 팔레트에서 Block List를 페이지로 드래그 앤 드롭합니다. 다음과 같이 코드를 변경합니다.

<a:widget name="jmaki.blockList" service="/xhp?id=rss2"  />

위젯의 사용자 정의를 위해 필요한 파일은 모두 resources 디렉토리에 위젯 이름으로 저장되어 있습니다. 여기에서는 jMaki 아래에서 Block List에 대한 파일을 봅니다. blocklist 디렉토리를 확장하고 component.css 파일을 엽니다.

height : 85px;라고 쓰여진 줄을 height : 25px;로 변경하고 파일을 저장합니다.

그런 다음, component.html 파일을 열고 다음 코드를 삭제합니다.

<br/>
@{description}<br/>

이러면 RSS 피드의 설명이 삭제되고 제목만 링크로 남습니다. 이 파일에 추가하여 날짜 등의 컨텐츠도 추가할 수 있습니다. 이제 모든 파일을 저장하고 Undeploy and Deploy를 클릭한 다음, 메뉴에서 Run을 클릭하고 Run Main Project를 선택하여 포틀릿을 다시 실행합니다.

Undeploy and Deploy를 다시 클릭합니다. 그런 다음, Run the application을 클릭합니다. 컨텐츠를 사용하여 만든 페이지가 나타납니다. Block List가 많은 자리를 차지하는 것에 유의하십시오. Projects 탭으로 이동하여 resources 디렉토리를 확장하고 jMaki 디렉토리를 확장하고 blockList를 확장하여 jMaki 위젯을 쉽게 사용자 정의할 수 있습니다. 그림 6과 같이 높이가 25픽셀(25px)이 되도록 component.css를 편집합니다.

그림 6. Block List 구성 요소 편집

Undeploy and Deploy를 다시 클릭합니다. 포틀릿을 실행하면 그림 7과 같이 보여야 합니다.

그림 7. 최종 포틀릿

포틀릿이 완료되었습니다. 포틀릿이 배포되면 사용자는 포털 페이지에 포틀릿을 추가하고 자신의 페이지에 원하는 정보를 액세스할 수 있습니다. 웹 사이트의 요구에 맞도록 여러 가지 방법으로 포틀릿을 조정할 수 있습니다. NetBeans IDE는 드래그 앤 드롭할 수 있는 많은 위젯을 제공하지만 팔레트가 제공하지 않는 위젯도 사용 가능합니다. 원하는 기능을 얻기 위해 무제한의 개체를 생성하는 자바 코드를 사용하거나 자신만의 위젯을 만들 수도 있습니다.

다음 단계는 전체 프로젝트를 ZIP 파일로 아카이브하여 서버 관리자에게 보내는 것입니다. 서버 관리자는 다음 섹션을 읽어 보십시오.

포틀릿 사양은 JSP 페이지 및 서블릿과 같은 다른 웹 구성 요소를 포함할 수 있는 표준 WAR(Web Application Archive) 파일의 일부로써 포틀릿의 패키징 및 배포를 지정합니다. WAR 파일 내의 web.xml 배포 설명자에 추가로 WEB-INF 디렉토리 설명자의 portlet.xml 파일은 모든 포틀릿과 포틀릿 관련 구성을 정의합니다. 포틀릿 사양 JSR 168에 포함된 XML 스키마는 portlet.xml 파일에 저장된 포틀릿 구성의 표준 요소를 정의합니다.

각 포털 서버 공급업체는 포틀릿 설명자 파일의 구문을 분석하고 포틀릿을 배포하는 도구를 제공해야 합니다. 이러한 도구는 GUI 형식이나 명령줄 형식일 수 있습니다. 개발자는 명령줄 배포 도구를 Apache Ant 도구와 통합할 수 있습니다. 대부분의 개발 도구가 Apache Ant와의 인터페이스를 제공하므로 추가적인 개발 환경 가능성이 만들어집니다.

프로젝트를 서버에 배포하려면 포털 서버의 문서에서 자세한 내용을 참조하십시오. 대부분의 포털 서버에서는 빌드 수행 후 프로젝트의 dist 디렉토리에 위치하게 되는 WAR 파일을 배포할 수 있습니다. 포털 서버에 따라 Ant 명령을 사용하거나 WAR를 포털 autodeploy 디렉토리에 복사하거나 포털 서버의 관리 기능을 사용하여 배포할 수 있습니다.

포틀릿을 만들어 봤으므로 이제 사용자들을 위해 포털 페이지에 다른 종류의 포틀릿을 만들 수 있습니다. 포틀릿은 지역 날씨, 최신 뉴스, 실시간 스포츠 점수, 지도, 다른 사이트로부터의 RSS 피드 등과 같은 구성 요소를 포함할 수 있습니다. 포틀릿을 사용하여 사용자는 구체적인 요구에 맞도록 웹 페이지를 사용자 정의할 수 있으며 따라서 웹 사이트에 계속 방문하게 됩니다.

• OpenPortal 포틀릿 컨테이너와 Portal Pack Plug-ins/Netbeans 6.0 베타를 사용한 플래시 데모
• 포틀릿 컨테이너 2.0 베타 소프트웨어의 이해
• 자바 포틀릿 사양 JSR 168 및 JSR 286 소개
• 자바 포틀릿 사양 JSR 168 소개 (PDF)
• OpenPortal 포틀릿 리포지토리