 |
|
난이도 : 초급 Jatin K. Varshney, Associate Software Engineer, IBM
원문 게재일 : 2009 년 7 월 02 일
번역 게재일 : 2009 년 9 월 15 일 정적 페이지 집계 기능을 사용하면 IBM® WebSphere® Portal 버전 6.1 프로젝트에서 정적
HTML 레이아웃 및 템플리트를 기반으로 포털 페이지를 작성할 수 있습니다. 이 기사에서는 IBM® Rational®
Application Developer 버전 7.5를 사용하여 포털 서버 런타임 환경을 대상으로 하는 정적 레이아웃을 작성, 설계, 사용자
정의 및 집계하는 단계별 프로세스를 안내합니다. 기본
포털 API에 대한 지식이 많지 않더라도 이 기사의 단계를 수행할 수 있습니다.
시스템 요구 사항
이 기사에서는 IBM® Rational® Application Developer 버전 7.5가 로컬 시스템에 설치되어 있고
IBM® WebSphere® Portal 버전 6.1 서버가 사용자에게 관리 권한이 있는 로컬 또는 원격 시스템에
설치되어 있다고 가정한다.
정적 페이지의 장점
지금까지 웹 사이트 설계자가 HTML, CSS(Cascading Style Sheet), JavaScript 등과 같은 간단한 웹 기술을 사용하여
웹 사이트의 전체적인 모습을 설계했지만 포틀릿은 일반적으로 Java™ 또는 JSP™(Java™Server Page)
개발자가 설계했다. 이제는 SPA(Static Page Aggregation)를 사용하여 포틀릿과 정적 웹 페이지를 결합함으로써 포틀릿의
장점을 최대한 활용할 수 있다. 이 작업은 정적 웹 페이지에서 간단한 HTML 마크업을 사용하여 완전한 포털 사이트를 작성하는
것만으로도 수행할 수 있다.
그림 1. HTML 레이아웃에 포틀릿 집계하기
단순한 웹 기술을 사용할 경우에는 Rational Application Developer의 Page Designer나 단순한 텍스트 편집기 같이
즐겨 사용하는 웹 저작 도구를 사용하여 사이트 레이아웃을 설계할 수 있다. 이렇게 하면 포털 레이아웃 모델을 사용할
때보다 쉽게 페이지의 레이아웃을 제어할 수 있다.
페이지에 포틀릿을 동적 요소로 포함할 수 있으며 컨테이너를 포틀릿에 대한 자리 표시자로 포함할 수
있다. 서버측 집계, Ajax 또는 IFrame 요소를 사용하여 이러한 포틀릿을 표시할 수 있으며 정적 페이지
내에서 연결 등을 사용하여 포틀릿 통신을 사용할 수 있다.
정적 페이지 집계는 단순하고 사용하기 쉬울 뿐만 아니라 포틀릿의 기능을 CSS, JavaScript 등과 같은
단순한 웹 기술과 함께 활용하는 데 큰 도움이 된다. 이 기사에서는 먼저 SPA 개념을 설명한 다음 SPA를
Rational Application Developer V7.5와 함께 사용하는 방법을 보여 주는 다음과 같은 단계를 차례로 설명한다.
- 가장 먼저 포털 프로젝트를 작성한 후 정적 레이아웃을 가진 포털 페이지를 작성한다.
- 정적 페이지에 추가할 포틀릿 프로젝트를 작성한다.
- 정적 레이아웃을 가진 포털 페이지(정적 페이지)를 작성한다.
- 이 정적 페이지를 편집하여 테마, 포틀릿 컨테이너 및 포틀릿 창을 추가한다.
- 프로젝트를 게시하여 위에서 설명한 처음 네 가지 작업의 간단한 결과를 확인한다.
- 정적 레이아웃에 대한 테마와 정적 페이지의 포틀릿에 대한 스킨을 작성한다.
- 포틀릿의 동적 기능을 사용하여 사이트에 대한 탐색을 자동으로 생성할 수 있다.
- 국제화 기능을 사용하여 정적 페이지를 전세계 여러 지역에서 사용할 수 있도록 만든다.
- 그런 다음 동일한 정적 레이아웃 리소스 아카이브 파일을 사용하여 추가 페이지를 작성하고
앞에서 작성한 정적 페이지를 편집한다.
- 마지막으로 정적 페이지가 포함된 완성된 포털 웹 사이트를 게시한다.
주요 용어
정적 레이아웃
일반 HTML 페이지를 기반으로 하는 페이지의 레이아웃은 포틀릿에 대한 참조를 포함할
수 있다. 이와는 반대로 동적 포털 페이지 레이아웃은 서버에 있는 데이터베이스에 구조적으로 정의되며 페이지
사용자 커스터마이저에 의해 관리된다.
정적 페이지
정적 레이아웃을 참조하는 포털 페이지이다. 정적 페이지는 임의 위치에서 포털 페이지 토폴리지의
일부일 수 있다(SPI 컨텐츠
및 탐색 모델 참조). 렌더링을 제외하면 이 페이지의 동작은 기본 포털 페이지와 동일하다(예: 액세스 제어).
동적 레이아웃
행이나 열로 구성된 표준 포털 레이아웃이며 데이터베이스 내에 유지된다.
포함된 정적 페이지
포털의 컨텐츠 영역에서 렌더링되는 정적 페이지이다. 포털 엔진은 배너, 바닥글 및 탐색을 렌더링하지만 컨텐츠는 배타적으로 정적 레이아웃에 의해 렌더링된다.
독립형 정적 페이지
전체 브라우저 컨텐츠를 렌더링하는 정적 페이지이다. 포털 서블릿에 의해 서비스되는 이 페이지는 전체 페이지를 배타적으로 제어한다.
포털 프로젝트 작성하기
Rational Application Developer의 New Portal Project 마법사를 사용하여 포털 프로젝트를 작성하거나
Import Project 마법사를 사용하여 WebSphere Portal Server 버전 6.1에서 프로젝트를 가져와서 사용자 정의할
수 있다. 프로젝트를 가져올 경우에는 서버에 이미 전개되어 있는 모든 포틀릿 정의가 나열되기 때문에 이러한
정의를 프로젝트의 포털 페이지에서 사용할 수 있다는 장점이 있다. 물론 이러한 정의에는 정적 페이지의 유틸리티
포틀릿처럼 처리되는 SPA 탐색 포틀릿이 들어 있다.
새 포털 프로젝트를 작성하려면 다음을 수행한다.
- Rational Application Developer 버전 7.5에서 File > New > Other를 선택한다.
- Show all wizards 선택란을 선택한다.
- 포털 범주에서 Portal project를 선택하고 다음을 클릭한다.
- OK를 클릭하여 포털 개발 기능을 활성화하고 New Portal Project 마법사를 연다(그림 2 참조).
그림 2. New Portal Project 마법사
- 프로젝트 이름(예:
FirstPortalProject)을 입력한다.
- 6.1을 포털 서버 버전으로 선택하고 Next를 클릭한다.
- 테마를 선택하고 Next를 클릭한다.
- 스킨을 선택하고 Finish를 클릭한다.
그림 3에서는 Portal Designer에서 편집을 위해 열려 있는 새 포털 프로젝트를 보여 준다.
그림 3. Portal Designer에 열려 있는 포털 구성
새 포털 프로젝트의 기본 구성에는 세 개의 포틀릿이 나열된다. 이러한 포틀릿은 동일한 작업 공간에서
사용자가 새로 작성한 사용자 정의 포틀릿과 함께 포털 프로젝트의 모든 페이지에서 사용할 수 있다.
- 포털 구성에서 사용할 수 있는 포틀릿을 보려면 Outline 보기로 이동하여 Elements > Portlets를 펼친다.
그림 4를 보면 다음과 같은 세 개의 포틀릿을 볼 수 있다.
- Login
- Edit My Profile
- Search Sitemap
그림 4. 새 포털 프로젝트에서 사용할 수 있는 포틀릿
서버에서 포털 프로젝트 가져오기
새 포털 프로젝트를 처음부터 작성하는 대신 서버에서 구성과 기타 테마 및 스킨 파일을 가져올 수 있다.
- Rational Application Developer에서 File > Import를 선택한다.
- 포털 범주를 펼치고 Portal을 선택한 후 Next를 클릭한다.
- 새 WebSphere Portal 버전 6.1 서버를 정의한다.
localhost를 선택하여 로컬 서버를 지정하거나 IP 주소를 입력하여 원격 서버를 지정한다. - 서버가 시작되었고 관리 권한이 있는지 확인한다.
- 신임을 입력하고 Finish를 클릭한다.
- 새로 작성된 서버를 선택한다.
- 프로젝트의 이름(예:
SecondPortalProject)을 입력하고 Finish를 클릭한다.
지정한 이름의 포털 프로젝트가 작업 공간에 작성되며 이 프로젝트에는 서버에서 가져온 필수 파일 및
포털 구성이 모두 들이 있다. 이 구성에는 서버에 전개된 모든 포틀릿이 있기 때문에 이 프로젝트에는
FirstPortalProject보다 많은 포틀릿이 있을 수 있다. 이들 포틀릿은 포털 프로젝트에서 사용할 수 있다.
포틀릿 프로젝트 작성하기
다음으로 수행할 단계는 새 사용자 정의 포틀릿 프로젝트(예: JavaServer Faces 지원이 포함된 표준 JSR168
포틀릿)를 작성하는 것이다. 이제부터 포털 프로젝트의 정적 페이지에서 이 포틀릿을 사용하는 방법에 대해 설명한다.
포틀릿 프로젝트를 작성하려면 다음을 수행한다.
- File > New > Other를 선택한다.
- Show all wizards 선택란을 선택한다.
- 포털 범주에서 Portlet project를 선택하고 Next를 클릭하여 New Portlet Project 마법사를 연다(그림 5 참조).
그림 5. New Portlet Project 마법사
- 프로젝트 이름(예:
MyWorkspacePortlet)을 입력한다. WebSphere Portal v6.1을
대상 런타임 환경으로 선택한다.
- JSR168 Portlet을 Portlet API로 선택하고 Faces portlet을 Portlet type으로 선택한다.
- Next를 두 번 클릭하고 Finish를 클릭한다.
- 포틀릿 프로젝트가 작성되면 MyWorkspacePortletView.jsp 파일이 편집할 수 있도록 열린다. "Place content here"
텍스트를
This is my simple JSR168 Faces portlet으로 바꾼다.
- 파일을 저장하고 편집기를 닫는다.
페이지 작성하기
포털 페이지는 포털 컨텐츠 모델의 요소 중 하나이다. 포털 프로젝트의 페이지는 동적 또는 정적 레이아웃을
사용하여 정의할 수 있다. 동적 레이아웃을 사용하는 페이지를 일반 포털 페이지라고 하며 정적 레이아웃을
사용하는 페이지를 정적 페이지라고 한다. 정적 페이지는 포털의 컨텐츠 영역에서만 렌더링하거나(포털에서
제공하는 배너, 탐색 및 바닥글 사용) 브라우저 영역에서 전체적으로 렌더링할 수 있다.
이 렌더링 동작의 경우에는 정적 페이지가 기본적으로 포함된 정적 페이지 또는 독립형 정적
페이지로 분류된다. 먼저 포함된 정적 페이지를 작성한 다음 독립형 정적 페이지를 작성한다.
정적 페이지 작성하기
포털 페이지에서 이미 작성한 정적 HTML 파일의 레이아웃을 사용하려거나 새로운 레이아웃을 작성하려면 Rational
Application Developer V7.5의 Static Page Creation 마법사를 사용해야 한다.
포함된 정적 페이지를 작성하려면 다음을 수행한다.
- Portal Designer에서 Page, Label 또는 URL 옵션 중 하나를 선택한다.
- 마우스 오른쪽 단추를 클릭하고 Insert Static page를 선택한 다음 Before, After 또는 As child
옵션 중 하나를 선택한다. 참고: URL 노드를 사용하는 경우에는 하위 레벨 페이지를 사용할 수 없다.
- Static Page Creation 마법사가 열리면(그림 6)
MyStaticPage를 페이지의 제목으로 입력한다.
그림 6. New Static Page 마법사
- Markup, File name 및 Portlet window display option의 기본값을 그대로 두고 Finish를 클릭한다.
MyStaticPage가 포털 구성에 추가되고 index.html 정적 레이아웃 파일이 편집할 수 있도록 Page Designer에 열린다.
이 마법사는 다음과 같은 항목으로 구성되어 있다.
- Markup 선택란: 정적 레이아웃을 포털 페이지에 제공할 수 있는 지원되는 마크업이다. 현재 SPA 스펙에서는 HTML 마크업만 지원된다.
- Title: 포털 페이지 제목이다. 페이지가 포함된 정적 페이지이면 탐색 표시줄에 제목이 표시된다.
- File name: 추가 편집을 위해 Page Designer에 열리고 MyStaticPage 포털 페이지의 레이아웃
파일로 사용될 새 정적 레이아웃 파일의 이름이다. 중요: 이 파일의 확장자는 .html 또는 .htm이어야 한다.
- "Create using existing ZIP or HTML page" 선택란 및 필드: 텍스트 상자에서는 HTML 정적 레이아웃
파일 및 관련 리소스가 포함된 아카이브의 위치를 지정하고 드롭다운 상자에서는 아카이브 내의 레이아웃 파일을
선택한다. 또는 "ZIP or HTML file location" 필드 및 관련 메뉴를 사용하여 아카이브가 아닌 기존 HTML 또는 HTM
정적 레이아웃 파일의 위치를 직접 지정할 수 있다. 이 파일은 작업 공간에 복사되어 앞에서 지정한 index.html
대신 포털 페이지의 정적 레이아웃으로 사용된다.
- Portlet window display option: 페이지를 표시하는 동안 포틀릿을 렌더링하는 데 사용되는 페이지에 대한 메타데이터 매개변수를 지정한다.
- Included markup: 포틀릿이 정적 페이지와 동시에 인라인으로 렌더링된다.
- Ajax: 포틀릿의 컨텐츠가 비동기적으로 렌더링된 다음 포틀릿 조각이 정적 페이지에 포함된다.
- IFrame: 정적 페이지에 포틀릿을 렌더링하는 IFrame이 포함된다.
지금까지 마법사의 각 항목을 살펴보았으므로 이제 정적 페이지 작성 작업을 조금 더 진척시켜보자.
정적 페이지가 작성되면 index.html 파일이 편집할 수 있도록 Page Designer에 열린다. 이 파일은 포털 프로젝트에
있는 PortalConfiguration/Static Layout 폴더의 하위 폴더인 page.uniquename에 있다. 여기서, uniquename은
정적 페이지의 내부 이름이다(예: page.ae354734c1).
이 폴더 내에 정적 레이아웃 및 기타 리소스(예: 이미지 및 양식)에 대한 디렉토리 구조를 작성할 수 있지만
정적 레이아웃 파일의 위치는 그대로 두어야 한다. 그렇지 않고 변경한 경우에는 정적 페이지의 Properties 보기를
사용하여 정적 레이아웃의 위치를 다시 지정해야 한다.
페이지의 초기 컨텐츠는 Listing 1의 코드와 같다.
Listing 1. 정적 페이지의 초기 컨텐츠
<table>
<tr>
<td> <div class="portlet-container" name="layoutcontainer1"></div> </td>
<td> <div class="portlet-container" name="layoutcontainer2"></div> </td>
</tr>
</table>
|
보면 알 수 있듯이 이 파일에는 <html> 태그가 없다. 따라서 이 페이지는 포함된
정적 페이지가 된다. 일반 HTML 페이지와 마찬가지로 <html> 태그 및 <body>와
같은 관련 중첩 태그가 포함된 정적 레이아웃의 컨텐츠를 작성하면 독립형 정적 페이지가 작성된다.
이제 포털 구성의 변경 내용을 살펴보자. MyStaticPage라는 이름의 페이지가 탐색 계층 구조에 표시되며 Portal Designer와
Outline 보기(그림 7)에서 이 페이지가 포함된 계층 구조를 볼 수 있다. 잠시 후에 이 페이지를 포틀릿 및 컨테이너에 대해
구성하는 방법을 살펴본다.
그림 7. Portal Designer의 Outline 보기에 있는 정적 페이지
정적 레이아웃 편집하기
이제 페이지의 컨텐츠를 편집해야 한다. 정적 페이지의 HTML 레이아웃 파일을 닫은 경우에는 Portal Designer에서
페이지를 마우스 오른쪽 단추로 클릭하고 Edit Layout을 선택하여 다시 열 수 있다(그림 8 참조).
그림 8. 정적 페이지의 정적 레이아웃 열기
정적 레이아웃 파일(예: index.html)에서 모든 컨텐츠를 제거한 후 파일을 저장한다.
컨텐츠 및 마크업 작성하기
이제 부동 레이아웃 CSS(Cascading Style Sheet)를 사용하여 사이트를 구조화할 수 있다.
그림 9에서는
머리글, 측면 탐색, 컨텐츠 영역 및 바닥글로 구성된 기본 사이트 구조를 보여 준다.
그림 9. 정적 페이지의 기본 레이아웃
이와 같은 기본 레이아웃을 작성하려면 Listing 2의 컨텐츠를 index.html 파일에 추가한다.
Listing 2. 기본 레이아웃에 대한 코드
<div id="wrapper">
<div id="header">
<h1>Static page aggregation</h1>
</div>
<div id="left">The side navigation area</div>
<div id="right">
The content area <br>
</div>
<div id="footer">IBM</div>
</div>
|
참고:
간단하게 설명하기 위해 이 HTML 코드에서는 <div> 태그만
사용한다. 이러한 태그를 그대로 사용하거나 필요에 따라 좀 더 복잡한 레이아웃을 작성할 수도 있다.
테마에 대한 스타일 시트 추가하기
이제 <div> 태그에 그림 9에서 본 레이아웃 구조를 지정하기 위해 외부 CSS를
포함하거나 index.html 페이지의 맨 위에 있는 <style> 태그 내에 CSS 클래스
정의를 작성할 수 있으며 인라인 CSS를 사용할 수도 있다. 여기에서는 외부 CSS를 사용한다.
스타일 시트를 추가하려면 다음을 수행한다.
- index.html 정적 레이아웃 파일이 있는 PortalContent > StaticLayout> page.uniquename 폴더 내에 "theme" 폴더를 작성한다.
- 그런 다음 theme 폴더 내에 새 CSS 파일을 작성한다.
- 프로젝트를 선택하고 File > New > CSS를 선택한다.
- theme 폴더로 이동한 후 CSS 파일의 이름을 테마로 입력한다.
- Next와 Finish를 차례로 클릭한다.
CSS 파일이 편집할 수 있도록 CSS 편집기에 열린다. 이제 CSS 편집기의 소스 분할창에서 CSS 양식을 작성할 수 있다.
- 소스 분할창을 마우스 오른쪽 단추로 클릭하고 New를 클릭한다.
- 마법사에서 기본값인 HTML tag and body를 선택하고 OK를 클릭한다.
- New Style 마법사에서 글꼴을 선택한다. 글꼴 목록 상자에서 Verdana를 찾아서 선택한 후
Add를 클릭하여 목록 상자에 해당 글꼴을 추가한다.
- 레이아웃 범주에서 margin을 선택하고
0을 입력한다. 그런 다음 padding을 선택하고 0을 입력한 후 OK를 클릭한다.
Listing 3과 같이 양식이 theme.css 파일에 삽입된다.
Listing 3. theme.css 파일의 변경 사항
BODY {
margin: 0px;
padding: 0px;
font-family: Verdana
}
|
- 이와 마찬가지로 Listing 4처럼
div 클래스의 기타 양식(left, right, footer 등)도 추가할 수 있다.
Listing 4. div 클래스에 추가된 양식
div#wrapper{
width: 100%;
height: 100%
}
div#header {
clear: both;
height: 50px;
background-color: #e3dffd;
padding: 15px;
text-align: center;
}
div#left {
float: left;
width: 20%;
height: 100%;
background-color: #e9fed3;
}
div#right {
float: right;
width: 80%;
height: 100%;
background-color: #fffce1;
}
div#footer {
clear: both;
background-color: #ffebdf;
text-align: center;
}
|
- 마지막으로 다음과 같은 theme.css의 링크를 index.html 파일에 추가한다.
<link rel="stylesheet" href="theme/theme.css" type="text/css">
이제 테마가 index.html 페이지에 적용되며 이 테마를 Page Designer에서 볼 수 있다.
포틀릿 컨테이너 및 포틀릿 창 추가하기
정적 페이지는 일반 포털 페이지와 마찬가지로 포틀릿 및 포틀릿 컨테이너를 포함할 수 있다. 정적 페이지에서
포틀릿 또는 컨테이너를 사용하려면 <div> 태그를 사용하여 SPA 스펙에 지정된 class 속성 값을 포함시켜야
한다. 이러한 class 속성 값은 <div> 태그에 포틀릿 컨테이너 또는 특정 포틀릿 창이라는 특별한 의미를 부여한다.
포틀릿 컨테이너 추가하기
class 속성 값이 portlet-container인 <div> 태그를
사용하여 정적 레이아웃에 컨테이너를 추가한다. 예를 들면, 다음과 같다.
<div class="portlet-container" name="container_0"></div>
|
이 <div> 태그에는 name이라는 추가 속성이 필요하다. 이는
컨테이너의 이름이며 페이지에서 고유해야 한다. 이 속성은 같은 페이지에 있는 컨테이너의 다양한 인스턴스를
구분한다. (하지만 포털의 다른 페이지에서는 같은 이름을 사용할 수 있다.)
index.html 페이지의 정적 레이아웃에서 컨테이너를 작성하려면 다음을 수행한다.
- Page Designer에서 Palette 보기를 연다.
- Portal 드로어를 연다.
- Static Page Container와 Static Page Portlet이라는 두 항목이 표시된다(그림 10 참조).
- Static Page Container
- Static Page Portlet
그림 10. 정적 페이지에 대한 항목을 보여 주는 Palette 보기
- Static Page Container를 끌어서 정적 레이아웃 파일의 컨텐츠 영역
<div> 태그
안에 있는 <br> 태그 바로 뒤에 놓는다.
<div id="right">
The content area <br>
</div>
|
- 정적 페이지 컨테이너 창에서(그림 11) 고유 기본 컨테이너 이름을 그대로 두거나 변경한 후 OK를
클릭한다. (Insert > Portal > Static page container를 선택하여 대화 상자를 열
수도 있다).
그림 11. "Insert static container" 창
- 파일을 저장한다.
다음과 같이 "container_0" 태그가 정적 레이아웃에 삽입된다.
<div class="portlet-container" name="container_0"></div>
|
이제 Portal Designer의 Outline 보기에 있는 포털 구성을 살펴보자. 그림 12에서는 Layout 디렉토리에 있는 MyStaticPage 파일에 대한 구성을 보여 준다.
그림 12. 포털 페이지 레이아웃 구성을 보여 주는 Outline 보기
MyStaticPage의 첫 번째 Column은 기본 루트 컨테이너이다. 루트 컨테이너의 하위 항목 중에 Row 컨테이너가
있다. 이 Row 컨테이너는 <div> 태그를 사용하여 정적 레이아웃에 추가한 정적
컨테이너이다. 정적 레이아웃 파일에 추가한 모든 <div> 태그의 루트 Column
컨테이너 내에 행이 작성된다.
중요:
정적 페이지에서는 중첩 컨테이너가 지원되지 않으므로 Listing 5와 같이 <div>
컨테이너 태그를 중첩하면 안된다. 이 태그를 중첩하려고 시도하면 최상위 컨테이너(이 예제의 경우 container_0)만
적용되고 다른 모든 컨테이너는 무시된다.
Listing 5. 중첩이 허용되지 않는 <div> 컨테이너 태그
<div class="portlet-container" name="container_0">
<div class="portlet-container" name="container_1"></div>
</div>
|
루트 컨테이너의 또 다른 기본 하위 컨테이너인 Column 컨테이너는 첫 번째 하위 컨테이너이면서 숨겨진
컨테이너이다. 이 컨테이너는 정적 레이아웃에서 컨테이너 <div> 태그를 정의하지
않더라도 정적 페이지 구성에 포함된다. 이 컨테이너에는 사용자가 정적 레이아웃에서 추가한 포틀릿 중 상위 컨테이너가
없는 모든 포틀릿이 있다. 이 숨겨진 컨테이너는 모든 고아 포틀릿의 상위 컨테이너가 된다.
포틀릿 창 추가하기
포틀릿은 class 속성 값이 portlet-window인 <div> 태그를
사용하여 정적 레이아웃에 추가된다(Listing 6 참조).
Listing 6. 정적 레이아웃에 포틀릿을 추가하는 코드
<div class="portlet-window" name="portlet-window_0"
style="portlet-definition: 'wps.p.Login'"></div>
|
포틀릿 창에 대한 이 <div> 태그를 완성하려면 다음과 같은 두 개의 추가 속성이 필요하다.
- name: 페이지에서 고유한 포틀릿 인스턴스의 이름이다(포털의 다른 페이지에서는 고유하지
않아도 됨). 이 이름은 페이지에 있는 같은 유형의 여러 포틀릿 인스턴스를 구별한다.
- style: 포틀릿 정의이거나 정적 페이지에서 인스턴스화하려는 포틀릿의 유형이다. style
속성의 값은
portlet-definition 속성의 값을 포함한다.
포틀릿 <div> 태그를 정적 레이아웃 페이지에 삽입하려면 다음을 수행한다.
- Palette 보기의 Portal 드로어에서 Static Page Portlet을 끌어서 컨테이너 내의 정적 레이아웃에 놓는다.
- 정적 페이지 포틀릿 창의 Portlet 테이블에서 포틀릿(예: MyWorkspacePortlet)을 선택한다(그림 13 참조).
그림 13. 정적 레이아웃 페이지 내에 포틀릿 삽입하기
- 페이지 내의 고유성을 고려하여 자동으로 생성된 기본 포틀릿 창 이름을 그대로 두거나 편집한다. OK를 클릭하여 마친다.
Listing 7과 같이 포틀릿 코드가 정적 레이아웃에 삽입된다.
Listing 7. 정적 레이아웃 코드에 삽입된 포틀릿 코드
<div class="portlet-window" name="portlet-window_1"
style="portlet-definition: 'com.ibm.faces.portlet.FacesPortlet.ae95c684c1'"></div>
|
지금까지 수행한 단계를 통해 다음과 같은 작업이 완료되었다.
- 포털 컨텍스트에서 포틀릿의 고유 이름 생성했다. (Portal Designer의 Outline 보기에서 Elements > Portlets
아래에 있는 포틀릿을 선택한 후 Properties 보기에서 이 고유 이름을 편집할 수 있다.)
참고: Properties 보기에서 포틀릿의 고유 이름을 변경한 경우에는 정적 페이지의 포틀릿을 유지하기 위해 정적
레이아웃 파일에 있는 관련 참조를 모두 변경해야 한다.
- 포틀릿
<div> 태그의 name 속성에 대한 고유 이름을 생성했다.
- 이 portlet-definition이 포함된
<div> 태그를 정적 레이아웃에 추가했다.
- 이 포틀릿과 관련된 항목을 포털 구성에 등록했다(아직 등록하지 않은 경우).
- MyWorkspacePortlet 프로젝트를 포털 프로젝트의 참조된 프로젝트로 추가했다.
중요:
텍스트 편집기에서 정적 레이아웃의 포틀릿 <div> 태그를 직접 처리할
경우에는 포틀릿이 포털 구성에 등록되어 있어야 한다. 그렇지 않은 경우에는 포틀릿이 포털 구성에 삽입되지 않으며 정적 레이아웃을
저장할 때 포틀릿을 사용할 수 없다는 오류 메시지가 리턴된다. 그러므로 관련 작업을 자동으로 처리해 주는 포틀릿 마법사를 사용하는
것이 좋다.
정적 페이지가 있는 포털 프로젝트 게시하기
이제 포틀릿이 포함된 기본 정적 페이지로 구성된 포털 프로젝트를 작성했으므로 이 프로젝트를 WebSphere Portal 버전 6.1
서버의 로컬 또는 원격 인스턴스에 게시하여 작동하는 모습을 살펴볼 수 있다. 하지만 포털 프로젝트를 게시하려면 먼저 Server
보기에서 새 서버를 작성해야 한다.
- 포털 프로젝트를 마우스 오른쪽 단추로 클릭하고 Run As > Run on Server를 선택한다(그림 14 참조).
그림 14. Run on Server 작업 시작하기
- Run on Server 마법사에서 Next를 클릭한다.
- Remove all을 선택한다(같은 작업 공간에서 Run on Server 작업을 이미 수행했던 경우).
- Next를 클릭하고 Finish를 클릭한다.
프로젝트가 게시되면 브라우저에 포털 프로젝트가 열린다. 이제 정적 페이지를 탐색할 수 있다(그림 15 참조).
그림 15. 게시 후 브라우저에 렌더링된 포함된 정적 페이지
확대하려면 클릭한다.
포털 탐색 추가하기
정적 페이지를 포함된 정적 페이지로 작성한 경우에는 포털에서 탐색 기능을 제공하므로 서버에서 페이지를 실행하는
동안 다양한 포털 페이지를 쉽게 탐색할 수 있다. 하지만 포털 프로젝트에서 정적 페이지를 독립형 정적 페이지로 추가한
경우에는 포털 프로젝트의 다른 페이지로 이동할 수 있는 방법을 마련해야 한다.
기본 WebSphere Portal 버전 6.1 서버에는 탐색 기능만을 제공하는 여러 유틸리티 포틀릿이 있다. 이러한 유틸리티 포틀릿은
고유 이름을 사용하여 정적 레이아웃에 쉽게 포함시킬 수 있다. 이 서버에서 가져온 포털 프로젝트 작업을 수행하고 있을 경우에는
다른 포틀릿에서와 마찬가지로 끌어서 놓기 작업을 사용하여 이러한 포틀릿을 정적 레이아웃에 삽입할 수 있다.
다음과 같은 탐색 포틀릿을 사용할 수 있다.
탐색 포틀릿
<div class="portlet-window" name="portlet-window_0"
style="portlet-definition: 'wps.p.SpaNavigataion'"></div>
|
탐색 포틀릿을 사용하여 동적 포털 탐색을 정적 페이지에 추가한다. 이 포틀릿은 포털 탐색 모델을 사용하여
정적 페이지에 대한 탐색 링크를 생성한다.
탐색 경로 포틀릿
<div class="portlet-window" name="portlet-window_0"
style="portlet-definition: 'wps.p.SpaBreadCrumbTrail'"></div>
|
탐색 경로 포틀릿을 사용하여 탐색 경로를 정적 페이지에 추가한다. 탐색 경로는 컨텐츠 루트에서부터 선택한 정적 페이지까지 아래로 이동한다.
페이지 목록 포틀릿
<div class="portlet-window" name="portlet-window_0"
style="portlet-definition: 'wps.p.SpaResourceList'"></div>
|
페이지 목록 포틀릿을 사용하여 동적으로 계산된 포털 리소스 링크 목록을 정적 페이지에 추가한다. 이 목록은
POCURI(Piece of Content URI)를 사용하여 동적으로 생성된다.
포틀릿 스킨 및 탐색 사용자 정의하기
앞에서 살펴본 대로 정적 레이아웃 파일의 지정된 위치에 있는 <div> 태그는 포틀릿,
컨테이너 또는 탐색을 참조할 수 있다. 페이지가 렌더링될 때 서버에서 이러한 <div>
태그를 포틀릿의 컨텐츠(아마도 동적 컨텐츠) 및 이러한 포틀릿에 대한 메타데이터를 정의한 마이크로 포맷으로 바꾼다.
이를 위해 포털에서는 다음과 같은 마이크로 포맷을 제공한다.
- 포틀릿 마이크로 포맷: 기본 설정 편집, 구성, 최대화, 최소화, 개인 설정 및 삭제와 같은 포틀릿 동작과 포틀릿 창을 정의한다.
- 컨테이너 마이크로 포맷: 포틀릿 컨테이너를 포틀릿에 대한 자리 표시자로 정의한다.
끌어서 놓기 동작의 경우
포틀릿 마이크로 포맷은 끌어올 소스를 제공하고 컨테이너 마이크로 포맷은 가져다 놓을 대상을 제공할 수 있다.
- 탐색 마이크로 포맷: 정적 페이지가 독립형 웹 페이지로 렌더링된 경우 탐색을 정의한다.
포틀릿 창 및 포틀릿 컨테이너 마이크로 포맷은 서버에서 동적으로 처리할 수 있는 오브젝트 ID를 포함할 수 있다. 정적
페이지를 작성할 때 마이크로 포맷을 이용하는 CSS 또는 JavaScript 기술을 사용하여 사용자에게 친숙한 사용자 인터페이스를
생성 및 렌더링할 수 있다.
이제 이러한 마이크로 포맷을 코드로 구현하는 방법에 대해 자세히 알아보자.
포틀릿 마이크로 포맷
그림 16에서는 서버에서 리턴하는 정적 페이지에 정의된 포틀릿 <div> 태그에 대한
포틀릿 마크업을 보여 준다. 이 마크업을 보려면 포틀릿이 있는 정적 페이지가 브라우저에서 렌더링될 때 브라우저의 마크업
검사 도구(예: Mozila Firefox의 Firebug)를 사용한다.
그림 16. 정적 페이지에 있는 포틀릿의 마크업(코드)
이 샘플에서는 서버에서 처리되는 오브젝트 ID 참조가 들어 있는 HTML 태그를 의도적으로 접혀 있는 형태로 보여
준다. <div> 태그, <ul> 태그 및 <li>
태그에는 특정 class 속성 값이 있다. 앞에서 지정한 class 속성 값을 가지고 있는 이들 태그는 포틀릿 마크업의
전체 구조를 정의한다. 다음 섹션에서는 이러한 class 속성에 대한 정의를 설명한다.
Class 속성
portlet-window
정적 레이아웃에서 포틀릿을 정의할 때 제공한 값과 동일한 값이다. 이 클래스가 포함된
<div> 태그의 속성 중에서 서버에서 추가되는 창의 오브젝트 ID에 대한 ID 속성을
제외한 나머지 모든 속성 값은 앞의 예제와 동일하다.
xoxo
이후 내용이 항목 목록임을 나타낸다.
portlet-info
포틀릿의 메타데이터 섹션을 소개한다. 모든 메타데이터는 이 컨테이너로 캡슐화되므로
CSS를 사용하여 숨길 수 있다. xoxo 클래스는 이 클래스에 목록 항목이 포함되어 있음을 나타낸다.
portlet-title
포틀릿의 지역화된 제목을 나타낸다. 언어 속성(lang=en)은 로캘을 식별한다.
portlet-actions
포틀릿 창에서 호출할 수 있는 포틀릿 동작 또는 작업을 나열한다. 참고:
이러한 작업은 HTTP에서 필수 동작이 아니다. 대신 일부 동작은 안전한 상호 작용이지만 서버를 수정하게 되는
안전하지 않은 동작도 있다. 동작 목록에서 각 상호 작용은 안전한 상호 작용을 의미하는 링크로 표시되거나
안전하지 않은 상호 작용(예: 삭제 작업)을 의미하는 양식으로 표현된다.
portlet-action
실제 동작 또는 작업을 설명한다. 실제 작업을 발생시키는 이들 동작은 selected 특성으로
표현된다. 또한 각 동작은 CSS를 사용하여 이러한 동작의 양식을 지정할 수 있도록(예를 들어, 동작 관련 아이콘을 추가하여)
동작 관련 속성으로 분류된다. 가능한 동작의 목록은 서버에서 Operations Feed를 사용하여 계산된다. 이 피드는 확장 가능하기
때문에 새 작업을 계속해서 추가할 수 있다.
portlet-window-body
포틀릿의 본문을 나타낸다.
selected
선택된 항목 즉, 포틀릿 또는 동작 중 하나를 식별한다. 포틀릿 창에 대한 <div>
태그가 이 속성이 있는 경우에는 해당 포틀릿이 페이지를 생성하는 상호 작용의 대상이다.
portal-drag-source
(선택 사항) 사용자가 포틀릿 창을 화면에서 끌 수 있음을 나타낸다. 이 속성은 포틀릿
창이 수정 가능한 포틀릿 컨테이너의 일부이고 페이지와 컨테이너를 수정할 수 있는 사용자의 권한이 잠겨 있지 않는 경우에만
유효하다. 컨테이너 마이크로 포맷에 대한 설명에서 놓기 대상의 표현 방법과 끌어서 놓기 작업의 수행 방법에 대한 설명을
볼 수 있다. 참고: 끌어서 놓기 동작은 클라이언트측에서 트리거되고 서버에서 실행된다.
스킨에 대한 양식 추가하기
서버에서 실행 중인 포틀릿이 포함된 정적 페이지가 표시되는 경우에는(그림 15) 형식이 지정되지 않은 채로
포틀릿이 표시되고 포틀릿 본문 바로 위에 포틀릿 동작이 표시된다. 따라서 앞에서 설명한 대로 마이크로 포맷
class 속성 값을 사용하여 포틀릿의 양식을 지정해야 한다.
- 이제 정적 페이지의 page.uniquename 폴더 아래의 skin 폴더에 CSS 파일을 추가한다.
- 이 파일의 이름을
skin.css로 지정한다.
- New Style 마법사를 사용하거나 텍스트 편집기에서 직접 아래 Listing에 있는 클래스 값을 skin.css 파일에 추가한다.
Listing 8. 스킨 CSS에 추가할 클래스 값
.xoxo{
margin-left: 0;
padding-left: 0;
list-style: none;
}
.xoxo ul{
margin:0px;
padding-left:0px;
font-weight: bold;
color: #FF9966;
background-color: #F5F4EF;
list-style-type: none;
display: none;
}
.portlet-title{
margin: 5;
font-weight: bold;
color: #85C329;
background-color: #FAFBF7;
border-top: 10px solid #CDCDCD;
list-style-type: none;
border-top-width: 5px;
}
.portlet-actions{
margin:1;
padding-left:10px;
font-weight: bold;
color: #FF9966;
background-color: #F5F4EF;
list-style-type: none;
border-bottom: 3px solid #CDCDCD;
cursor: pointer;
padding-left: 10px;
}
.portlet-actions li{
margin: 1;
font-weight: bold;
color: #FF9966;
background-color: ##F5F4EF;
list-style-type: none;
text-align: left;
cursor:auto
}
.portlet-window-body{
border-bottom: 6px solid #CDCDCD;
margin-left:10px;
}
|
.xoxo ul 클래스의 display 특성을 보면
none으로 설정되어 있다. 이 특성은 xoxo 클래스가
있는 <div> 태그 내의 첫 번째 UL 요소를 위한 것이며 portlet-actions
클래스 속성이 있는 <ul> 태그에 대한 것은 아니다. 이 값을
사용하면 사용자가 접혀 있는 빼기 기호를 클릭하여 펼치기 전까지는 포틀릿 동작이 브라우저에 표시되지
않는다(접혀진 상태). JavaScript를 사용하는 단순한 펼치기-접기 메커니즘을 제공하여 포틀릿 동작을
포틀릿 스킨의 일부로 렌더링한다.
- 이제 다음과 같이 skin.css의 링크를 정적 레이아웃 파일에 추가한다.
<link rel="stylesheet" href="skin/skin.css" type="text/css">
|
다음 단계는 JavaScript를 추가하여 이 스킨을 접기 가능한 스킨으로 만드는 것이다.
JavaScript를 추가하여 접기 가능한 스킨으로 만들기
양식 표시 특성을 none으로 지정했기 때문에 포틀릿의 초기 상태에서는 포틀릿
동작이 표시되지 않는다. 포틀릿 스킨 동작을 접기 가능하도록 만들려면 JavaScript를 추가해야 한다. 이 작업에서는
정적 레이아웃의 page.uniquename 내의 skin 폴더에 skin.js라는 새 JavaScript
파일을 작성한다.
새 JavaScript 파일을 작성하려면 다음을 수행한다.
- File > New > Other를 클릭한다.
- 대화 상자에서 JavaScript 섹션을 펼치고 JavaScript Source file을 선택한다.
- Next를 클릭한다.
skin.js라는 이름을 입력한다. - JavaScipt 파일을 작성해야 하는 폴더로 이동한다. Finish를 클릭하여 skin.js 파일을 JavaScript 편집기에서 연다.
- Rational Application Developer 버전 7.5에서는 Java 형태의 편집기를 사용하여 JavaScript를 편집할 수 있다.
- Listing 9의 코드를 skin.js 파일에 추가한다.
Listing 9. 접기 가능한 스킨으로 만들기 위해 추가할 코드
/**
* Registers the onclick event of the document
*/
document.onclick = function(e) {
if (!e) e = window.event; // Now e is available to be used in all browsers
var elem = getEventTarget(e);
/* test if the element is a UL tag (case insensitive) */
if (/UL/i.test(elem.tagName)) return;
else elem = getAncestorElement(elem, 'tagName', /li/i);
if (elem) {
/*
* if xoxo is not prepended to className 'portlet-actions' i.e.
* portlet-actions is not a list, hence return
*/
if (!/\bportlet-actions\b/i.test(elem.className)) return;
/*
* get the first UL child of the portlet-actions since it contains all
* the actions
*/
var ulStyle = elem.getElementsByTagName('ul')[0].style;
/* toggle between the style of UL from block to normal */
ulStyle.display = (!ulStyle.display) ? 'block' : '';
}
};
/**
* Returns the element node where the mouse was clicked
*/
function getEventTarget(e) {
var eventTarget;
if (e.target)
eventTarget = e.target; // for W3C standards and Netscape
else if (e.srcElement)
eventTarget = e.srcElement; // IE
/* If node type of eventTarget is not ELEMENT return its parent */
return eventTarget.nodeType == 1 ? eventTarget : eventTarget.parentNode;
}
/**
* Returns the ancestor element of the node elem whose prop value is equal to
* regexVal
*/
function getAncestorElement(elem, prop, regexVal) {
while (elem) {
if (regexVal.test(elem[prop]))
return elem;
elem = elem.parentNode;
}
return undefined;
}
|
이 JavaScript 코드에는 다음과 같은 세 함수가 있다.
document.onclick 함수는 문서의 모든 on-click 이벤트를 처리한다.
그리고 모든 동작을 정의하는 <ul class="xoxo portlet-actions"> 태그의
접기 가능 동작을 처리한다. getEventTarget 함수는 클릭된 문서의 요소 노드를 리턴한다. document.onclick
함수는 이 요소 노드를 검사하여 사용자가 실제로 동작이 포함된 <div> 태그를 클릭했는지 여부를
확인해야 한다. getAncestorElement 함수는 <li> 태그를
리턴하며(document.onclick 함수의 요청에 따라) 이 리턴된 태그는 클릭된
<div> 태그의 동위 또는 상위 요소이다.
컨테이너 마이크로 포맷
그림 17에서는 정적 레이아웃에 있는 컨테이너 <div> 태그를 정의하는 정적 페이지에 대한 서버에서 리턴된 컨테이너의 마크업을 보여 준다.
그림 17. 정적 페이지에 있는 컨테이너의 마크업
이 컨테이너는 다음과 같은 class 속성 값을 제공한다.
portlet-container
호스팅 페이지의 범위 내에서 고유한 컨테이너의 이름이다. 이 이름은
사용자가 정적 레이아웃에 있는 포틀릿 컨테이너에 지정한 값과 같다. ID 속성에는 창의 오브젝트 ID가 있다.
portal-drop-target
끌어서 놓기 작업의 놓기 대상인 수정 가능한 컨테이너이다.
portal-drop-handler
끌어서 놓기 작업의 콜백 처리기를 나타내는 양식이다. 이 동작에는 놓기
대상을 고유하게 식별하는 URL이 있다. JavaScript를 사용하여 추가 힌트를 추가하고 동적으로 소스를 양식으로
끌어올 수 있다. 끌기 소스의 경우 포틀릿을 정의할 때 포틀릿 마이크로 포맷의 속성을 사용한다.
탐색 마이크로 포맷
그림 18에서는 정적 레이아웃에 있는 탐색 포틀릿 <div> 태그를 정의하는
정적 페이지에 대한 서버에서 리턴된 탐색 포틀릿의 마크업을 보여 준다. 포틀릿이기 때문에 여기에서는 전체
구조에 대한 포틀릿 마이크로 포맷이 유효하다.
그림 18. 정적 페이지에 있는 탐색 포틀릿의 마크업
portlet-window-body 클래스가 있는 <div> 태그에서만
다양한 탐색 상태를 처리하기 위해 특정 class 속성 값을 사용하여 추가 마크업을 정의한다. 이러한 class 속성 값은 다음과 같다.
first
목록의 첫 번째 하위 노드이며 CSS 양식에 필요하다.
last
목록의 마지막 하위 노드이며 CSS 양식에 필요하다.
expanded
펼쳐진 노드이다. 노드는 하위 노드가 있고 탐색 상태가 expanded로 설정된 경우에만 펼쳐질 수 있다.
collapsed
접혀진 노드이다. 노드는 하위 노드가 있고 탐색 상태가 collapsed로 설정된 경우에만 접혀질 수 있다.
page-actions
페이지에서 사용할 수 있는 동작의 목록이다. 대개 탐색 노드를 펼치거나 접는데 사용되는
동작이다. 현재 탐색에서 선택된 페이지의 경우 이 목록에는 해당 페이지에서 사용할 수 있는 동작도 포함되어 있다.
selected
현재 탐색에서 선택된 페이지이다.
pageoperation-expand
접혀진 노드를 펼치는 속성이다.
pageoperation-collapse
펼쳐진 노드를 접는 속성이다.
CSS 및 JavaScript 기술을 스킨에 적용할 수 있는 것처럼 정적 페이지의 컨테이너 및 탐색도 사용자에게 친숙한
사용자 인터페이스로 전환할 수 있다.
옵션
지역화된 파일 추가하기
정적 페이지에서 다양한 언어나 로캘을 지원하려는 경우 정적 페이지 집계 기술을 활용하면 큰 노력
없이도 지역화를 수행할 수 있다. 즉, 기본 파일의 이름 지정 규칙을 따르는 다양한 파일 이름을 지정하기만
하면 된다. 이러한 파일에는 HTML 파일, 그래픽 파일(JPG, GIF 등), CSS 파일, JavaScript(.js) 파일 등이 포함된다.
지역화된 파일의 이름 지정 규칙
기본 파일 이름이 base_file_name.extension이라면 파일의 지역화된 버전에
base_file_name_locale.extension 형식의 이름을 지정해야 한다.
예를 들어, 기본 파일의 이름이 my_page.html일 경우 파일의 영어 버전은
my_page_en.html이고 미국 영어 버전은 my_page_en_us.html이다. 이들
파일은 기본 파일 my_page.html과 같은 디렉토리에 있어야 한다. 이들 파일은
각기 다른 이름을 가지고 있기는 하지만 기본 이름을 통해 참조되기 때문에 논리적으로는 동일한 리소스를
나타낸다. 포털에서는 적절한 리소스의 지역화된 버전을 제공한다.
여러 페이지에 사용할 파일 작성하기
지금까지 스타일 시트, JavaScript, 이미지 등의 다양한 리소스를 참조하는 정적 레이아웃이 포함된 정적 페이지를
작성했으므로 이제부터는 이러한 리소스가 모두 포함된 .zip 파일을 작성하여 포털 프로젝트의 다른 정적 페이지에서
동일한 작업을 수행할 때 다시 사용할 수 있다.
기존 레이아웃 파일을 사용하여 새 정적 페이지를 작성하려면 다음을 수행한다.
- Portal Designer에서 노드(페이지, 레이블 또는 URL)를 선택한다.
- Insert static page를 선택한 후 Before, After, As child 중에서 하나를 선택한다.
여기서 주의할 점은 URL은 하위 레벨 속성을 가질 수 없다는 점이다.
- 앞에서 본 것처럼 New page with the static layout 대화 상자가 열리면
MyStaticPage2를 정적 페이지 제목으로 입력한다.
- 기존 레이아웃을 선택하기 위해 "Create using existing ZIP or HTML page" 선택란을 선택한다.
- Browse를 클릭하여 .zip 파일 또는 자체 포함 HTM 또는 HTML 레이아웃 파일을 찾은 후 OK를 클릭한다.
- .zip 파일을 선택한 경우에는 "Select the Layout file" 드롭다운 메뉴에서 HTM 또는 HTML 파일을 선택한다.
- 다른 모든 옵션의 기본값을 그대로 두거나 필요에 따라 변경한 후 Finish를 클릭한다.
- .zip 파일에 있는 정적 레이아웃 파일을 이용하여 정적 페이지가 작성되며 이 정적 레이아웃 파일이 편집할 수
있도록 열린다. 포털 구성을 저장한다.
이 작업은 .zip 아카이브 파일의 모든 컨텐츠를 page.uniquename 폴더 아래의 폴더로 가져온다. 이 폴더는 포털
프로젝트의 PortalConfiguration > StaticLayout 폴더 아래에 있다. 여기서, uniquename은 Portal Designer에서
사용되는 정적 페이지의 내부 고유 이름이다.
정적 레이아웃을 사용하여 포털 페이지 특성 편집하기
정적 페이지에 설정한 정적 레이아웃이 마음에 들지 않는 경우에는 사용자의 .zip 파일이나 다른 .zip 파일에 있는 다른
레이아웃 파일로 바꿀 수 있다. 포틀릿 창의 표시 방법도 변경할 수 있다. Portal Designer에서 정적 페이지를 선택한 다음
Properties 보기의 Static Page 탭에서 필요한 단계를 수행하면 된다(그림 19 참조).
그림 19. Portal Designer에 있는 정적 페이지의 Properties 보기
정적 페이지의 정적 레이아웃을 동일한 .zip 파일의 다른 레이아웃 파일로 업데이트하려면 다음을 수행한다.
- Update Layout File 드롭다운 메뉴를 선택하고 사용하려는 레이아웃 파일을 선택한다.
- 정적 페이지가 방금 선택한 정적 레이아웃 파일로 업데이트되며 이 레이아웃 파일이 편집할 수 있도록 열린다. 포털 구성을 저장한다.
정적 페이지의 정적 레이아웃 파일을 다른 .zip 파일의 레이아웃 파일이나 새 정적 레이아웃으로 업데이트하려면 다음을 수행한다.
- New를 클릭하여 "Replace static layout file" 창을 연다(그림 20 참조).
- MyStaticPage에 대한 새 레이아웃 파일을 작성하기 위해 Finish를 클릭한다.
- 기존 레이아웃을 선택하기 위해 Create using existing ZIP or HTML page 선택란을 선택한다.
- 원하는 파일을 찾아서 선택한 후 Finish를 클릭한다.
그림 20. "Replace static layout of the portal page" 창
- 선택한 정적 레이아웃 파일을 이용하도록 정적 페이지가 업데이트되며 이 레이아웃 파일이 편집할 수 있도록 열린다.
- 포털 구성을 저장한다.
- 정적 페이지의 포틀릿 창 표시 옵션을 변경하려면 Properties 보기에서 Portlet window display 옵션을 선택하고 원하는 값으로 업데이트한다.
- 포털 구성을 다시 저장한다.
정적 페이지가 있는 포털 프로젝트 게시하기
이제 정적 페이지로 구성된 포털 프로젝트가 작성되었으므로 로컬 또는 원격 WebSphere Portal V6.1 서버에 포털 프로젝트를 게시할 수 있다.
사용자 정의된 포털 테마 및 스킨이 필요하지 않은 경우(독립형 정적 페이지인 경우) Deploy portal
configuration only 옵션을 사용하여 정적 페이지를 완벽하게 전개할 수 있다. 이렇게 하면 테마 및
스킨이 있는 전체 포털 프로젝트를 전개할 때보다 빠르게 전개할 수 있다.
기타 옵션
이 기사에서는 정적 페이지 집계에 대해 설명했으며 Rational Application Developer V7.5를 사용하여 구체적으로
구현하는 방법을 살펴보았다. 지금까지 살펴본 작업보다도 훨씬 많은 작업을 정적 페이지에서 수행할 수 있다. Portal
Designer를 사용하여 협조 포틀릿을 정적 페이지에 포함 및 연결할 수 있으며, 사용자가 쉽게 찾아서 책갈피를 지정할
수 있도록 친숙한 형태의 정적 페이지에 대한 URL을 작성할 수도 있다.
참고자료 교육
-
IBM WebSphere
Portal Information Center에서 정적 페이지 집계에 대한 자세한 정보를 볼 수 있다.
-
IBM® developerWorks®의 Rational Application
Developer for WebSphere Software 페이지에서 제품 설명서, 기사, 튜토리얼, 교육, 다운로드 및 기타 유용한 영역에 대한
링크를 볼 수 있다.
- IBM® developerWorks®의 What's
new in IBM Rational Application Developer Version 7.5 페이지에서 제품 설명서, 기사, 튜토리얼, 교육, 다운로드 및 기타 유용한 영역에 대한
링크를 볼 수 있다.
-
WebSphere Portal 모델 SPI 개요에서 설명하는 여러 주제를 읽어보자.
-
IBM Rational Application Developer Information Center에서 다양한 기술 정보를 확인할 수 있다.
-
IBM Rational Software Delivery Platform에서
병렬 개발 및 지역적으로 분산되어 있는 팀을 위한 협업 도구와 아키텍처 관리, 자산 관리, 변경 및 릴리스 관리, 통합
요구 사항 관리, 프로세스 및 포트폴리오 관리 및 품질 관리를 위한 전문 소프트웨어를 포함한 기타 애플리케이션에 대한
정보를 볼 수 있다.
-
developerWorks의 Rational 소프트웨어 영역에서
Rational Software Delivery Platform 제품과 관련된 기술 자료와 베스트 프랙티스를 볼 수 있다.
-
컴퓨터 기반,
웹 기반 및 강사 지도 Rational 온라인 강의를 살펴보자. 초급에서 고급까지의 다양한 강의를 통해 Rational 도구에 대한
지식을 쌓고 기술을 연마하자. 이 카탈로그의 강의는 컴퓨터 기반 교육 또는 웹 기반 교육을 통해 구입할 수 있다. 일부 "시작하기"
강의의 경우 무료로 제공된다.
-
효과적인 소프트웨어 개발에 필요한 개념에 대한 기사를 제공하는
Rational Edge
뉴스레터를 구독하자.
-
1주일 동안의 developerWorks 튜토리얼, 기사, 다운로드, 커뮤니티 활동, 웹 캐스트,
이벤트 등에 대한 소식을 전하는 IBM
developerWorks 뉴스레터를 구독하자.
-
기술 서점에서
다양한 기술 주제와 관련된 서적을 살펴보자.
제품 및 기술 얻기
토론
필자소개 | 
| | Jatin Varshney는 인도에 있는 IBM India Software Labs 소속의 System Software Engineer이다. IBM
Rational Application Developer의 Portal Tools 구성 요소에 포함되는 Portal Designer 및 Web 2.0 기능을
맡고 있다. |
기사에 대한 평가
|
| 이 문서 북마킹 하기
|
| 
