developerWorks에 처음 로그인하면 developerWorks프로파일이 생성됩니다.귀하의 프로파일에서 동의하신 내용이 공개되지만 이 사항은 언제든지 변경 가능합니다. 귀하의 성명(숨김으로 체크되어 있어도 표시됩니다)과 디스플레이 이름은 게시한 컨텐츠나 사이트 엑세스시 표시됩니다.

모든 정보가 안전하게 전송되었습니다.

처음 developerWorks에 로그인할 때 프로파일이 작성되므로, 이를 위해 디스플레이 이름을 선택해야 합니다. 선택하신 디스플레이 이름은 developerWorks에 게시한 컨텐츠에 표시됩니다.

3글자 이상 31글자 이하의 길이로 사용 가능합니다. dW커뮤니티 내에서는 보안상 이메일주소를 제외한 다른 이름을 지정하셔야 합니다.

모든 정보가 안전하게 전송되었습니다.

My developerWorks：

나의 통지：

로그아웃

언어 선택：

IBM Lotus Quickr 8.5 for WebSphere Portal에서 테마 사용자 정의하기

Abhishek Kumar Verma, Automation Lead-TFL, IBM

Abhishek is an application developer. He has almost 3 years of experience in IBM as well as IT. He is Sun Certified Java Programmer (SCJP), IBM AIX (Advanced Interactive eXecutive), and SQL certified. He is currently in TFL test team as Automation Test Lead, where he is working in Rational Service Tester Version 8. He has initially automated a number of scripts alone as Proof of Concept and now he has prepared a regression suite to run automated scripts against each build. Abhishek works full time to automate test scripts and train his team members on how to use Rational Service Tester. He has been leading a team of 5 automation testers. He has also worked on number of automations tools like Rational Functional Tester, SOAP UI Tool and Rational Performance Tester.

요약： 이 기사에서는 IBM® Lotus® Quickr® 8.5 for WebSphere® Portal의 테마에 대한 개요를 설명합니다. 이후 섹션에서는 테마와 스킨을 작성하는 데 필요한 정보와 로고 변경, 색상 스키마 변경, 레이아웃 고급 변경 및 사용자 정의 쉘프에 컴포넌트 통합 등과 같이 업데이트를 위해 테마와 스킨을 사용자 정의하는 데 필요한 정보를 제공합니다.

여기에 태그 달기!

원문 게재일: 2010 년 9 월 14 일
번역 게재일: 2010 년 12 월 31 일
난이도: 중급
원문: 보기
페이지뷰： 4152 회
의견：

편집자 주: 이 주제에 대해 많이 알고 있습니까? 전문 지식을 공유하길 원합니까? IBM Lotus 소프트웨어 wiki 프로그램에 지금 참여하십시오.

Lotus Quickr wiki

선수조건

기본 HTML, JSP(JavaServer™ Pages), CSS(cascading stylesheets) 및 JavaScript™를 잘 알고 있어야 한다. Websphere Portal V6.1.5 기반의 Lotus Quickr 8.5는 기존 포털 페이지 빌더 테마에 확장으로서 테마를 제공한다. 이 기사를 충분히 활용하려면 IBM WebSphere Portal V6.1.5의 페이지 빌더 테마에도 익숙해야 한다. 포털 테마 사용자 정의에 대한 자세한 정보는 WebSphere Portal Information Center 6.1.5를 참조하기 바란다.

위로

시작

테마는 상위 JSP 파일(Default.jsp) 및 이 파일의 하위 단편으로 구성되어 있는 파일 세트이다. 단편 JSP는 상위 JSP 내에 포함되어 있으며 규칙에 따라 JSPF 확장자를 사용하여 저장된다. 테마 JSP 외에도 테마는 이미지 파일(테마 그래픽), 스타일시트, JavaScript 파일 및 Dojo 위젯으로도 구성되어 있다. 다음 섹션에서는 테마 레이아웃에 대해 자세히 살펴본 후 테마의 다양한 요소를 변경하는 방법에 대해 설명한다.

테마 레이아웃

이전 섹션에서 설명한 대로 테마는 상위 JSP를 통해 컴파일되어 테마에 포함되는 단편으로 구분된다. 기본 테마 단편은 다음과 같다.

글로벌 탐색
제목 표시줄
플레이스 표시줄
사이드 탐색
포틀릿 변환 영역
푸터

그림 1에서 이러한 단편의 레이아웃을 볼 수 있다.

그림 1. 테마 레이아웃

테마를 단순하게 유지하기 위해 레이아웃의 각 섹션에 하나의 JSP 또는 JSP 단편이 있다. 예를 들어, globalNav.jsp는 글로벌 탐색을 변환하기 위해 작성되었다. 이와 유사하게 topNav.jspf와 sideNav.jspf는 각각 제목 표시줄과 사이드 탐색을 변환하기 위해 작성되었다. 그림 2에서는 테마 JSP의 단순화된 구조를 보여 준다.

그림 2. 테마 구조

위로

테마 사용자 정의

테마 사용자 정의의 범위는 새 색상 스키마를 페이지에 추가하는 간단한 스타일시트 변경부터 테마의 기존 요소를 수정하고 사용자 정의 애플리케이션 및 컴포넌트의 통합이 필요한 변경 작업을 수행하는 고급 변경까지 광범위하다. 다음 섹션에서는 테마 사용자 정의의 기본 메커니즘을 살펴본 후 테마 레이아웃을 변경하고 새 컴포넌트를 통합하는 고급 시나리오를 설명한다.

사용자 정의 테마 작성하기

제품에서 바로 사용할 수 있는 기본 테마 및 스킨은 EAR 파일인 QuickrThemeApp.ear에 배치된다. 이러한 변경 작업을 수행하려면 서버에 대한 관리 액세스 권한이 있어야 한다. 사용자 정의 테마 또는 스킨을 작성하려면 QuickrThemeApp.ear을 임시 위치에 복사한 후 수정한다. 새 테마는 새 EAR 파일로 패키지되고 배치된다.

중요: 테마를 변경하기 전에 사용자 정의 테마를 작성한다. 원본 Lotus Quickr 테마는 일반적으로 임시 수정사항을 테마에 적용하거나 수정팩을 추가할 때 다시 배치될 수 있다.

다음 단계에서는 테마 EAR 파일을 작성하는 과정을 설명한다.

기본 테마 파일 wp_profile/installableApps/QuickrThemeApp.ear을 임시 위치에 복사한다.
QuickrThemeApp.ear 파일을 언팩한다.
QuickrThemeApp.ear/META-INF/application.xml 파일을 수정하여 고유 표시 이름, 모듈 ID 및 컨텍스트 루트를 추가한다.
EAR 파일을 다시 빌드한다. 새 EAR 파일의 이름은 원본 QuickrThemeApp.ear 파일의 이름과 달라야 한다.
새 EAR 파일을 서버로 다시 복사하여 배치한다. WebSphere Portal 6.1.5 Information Center의 Deploying the theme를 참조한다.
새 테마 및 스킨을 등록한다. Listing 1의 샘플 xmlaccess 스크립트를 참조하여 사용자 정의 테마를 가져온다.

참고: 스크립트 내에서 이 사용자 정의 테마 애플리케이션을 식별하는 고유 컨텍스트 루트(3단계에서 제공됨)를 제공해야 한다.

Listing 1. DeployYourTheme.xml

<?xml version="1.0" encoding="UTF-8"?>
<request xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="PortalConfig_6.1.0.xsd" 
type="update" create-oids="true">
    <portal action="locate">
        
        <skin action="update" active="true" default="false" domain="rel" 
        objectid="ibm.portal.skin.qkr_custom" uniquename="ibm.portal.skin.qkr_custom" 
        resourceroot="QkrSkin" context-root="/QuickrTheme_custom" type="default">
            <localedata locale="en">
                <title>QkrSkin_custom</title>
            </localedata>
        </skin>
        <skin action="update" active="true" default="false" 
        domain="rel" objectid="ibm.portal.skin.qkrthin_custom" 
        uniquename="ibm.portal.skin.qkrthin_custom" resourceroot="QkrThinSkin" 
        context-root="/QuickrTheme_custom" type="default">
            <localedata locale="en">
                <title>QkrThinSkin_custom</title>
            </localedata>
        </skin>
        <theme action="update" active="true" 
        context-root="/QuickrTheme_custom" default="false" 
        defaultskinref="ibm.portal.skin.qkr_custom" domain="rel" 
        objectid="ibm.portal.theme.qkrtheme_custom" resourceroot="Quickr" 
        uniquename="ibm.portal.theme.qkrtheme_custom">
            <localedata locale="en">
                <title>QkrTheme_custom</title>
            </localedata>
            <allowed-skin skin="ibm.portal.skin.qkr_custom" 
            update="set"/>
            <allowed-skin skin="ibm.portal.skin.qkrthin_custom" 
            update="set"/>
        </theme>       
        		
    </portal>
</request>

자세한 정보는 WebSphere Portal 6.1.5 Information Center의 Importing a theme를 참조한다.

Home – Advanced Administration – Portal User Interface – Themes and Skins 아래에 사용자 정의 테마 및 스킨이 나열된다.

초기 개발의 경우 테스트 페이지 또는 플레이스를 작성한 후 사용자 정의 테마를 적용한다. 테마는 Place Actions – Edit Place를 사용하여 플레이스에 지정할 수 있다. 테마를 수정하고 유닛 테스트가 완료된 후 서버의 기본 테마를 사용자 정의 테마로 업데이트한다. 이 태스크는 고급 관리 아래의 테마 및 스킨 페이지에서 수행할 수 있다. 기존 플레이스가 기본 이외의 테마를 사용할 수 없도록 설정된 경우에는 모든 플레이스가 사용자 정의 (기본) 테마를 사용하도록 자동으로 업데이트된다.

테마 파일 수정하기

이전 섹션에서 설명한 대로 테마는 테마의 프리젠테이션 의미를 정의한 JSP 및 스타일시트의 세트로 구성되어 있다. Lotus Quickr 8.5에서 테마 스타일시트는 테마, 플레이스 카탈로그 및 개별 Lotus Quickr 컴포넌트(예: 블로그, 라이브러리 등)를 포함한 여러 컴포넌트에서 공유된다. 또한 레이아웃의 일부 파트(예: 푸터)는 Lotus Quickr 팀플레이스, 플레이스 카탈로그 및 플레이스 관리에서 공통으로 사용된다. 단순함을 위해 이러한 모든 자원은 공통 자원 애플리케이션 아래에 별도로 번들링되었다. 테마 애플리케이션 및 공통 자원 애플리케이션의 위치는 다음과 같다.

테마:

wp_profile\installedApps\<server_node_name>\

 QuickrThemeApp.ear\wp.theme.quickrtheme.war\themes\html\Quickr

공통 자원:

wp_profile\installedApps\<server_node_name>\

 QuickrCommonResourcesApp.ear\qkr.common.resources.war

이 기사의 나머지 부분에서는 위의 테마 위치를 theme_root 디렉토리라고 하고 공통 자원 애플리케이션 위치를 common_resources_root 디렉토리라고 한다.

중요: 사용자 정의 공통 자원 EAR 파일을 작성하고 배치한다. "Create a custom theme" 섹션의 단계에 따라 이 태스크를 수행한다.

스타일시트 추가하기

Lotus Quickr 8.5에는 바로 사용할 수 있는 스타일시트 세트가 있다. 이러한 스타일시트는 Lotus Quickr 사용자 정의 색상표에서 선택하고 적용할 수 있다. 그림 3에서는 사용 가능한 스타일시트와 팀플레이스에 적용된 샘플 색상 스키마를 보여 준다.

그림 3. 사용자 정의 쉘프 스타일
사용자 정의 쉘프 - 스타일

바로 사용할 수 있는 스타일시트 중에서 원하는 색상 스키마를 제공하는 스타일시트가 없을 경우에는 새 스타일시트를 작성하여 사용자 정의 색상표에 추가한 다음 원하는 플레이스에 선택적으로 적용할 수 있다. 또는 공통 자원 애플리케이션에 있는 기본 스타일시트를 수정하여 모든 플레이스 및 Lotus Quickr 홈 페이지에 대한 색상 스키마를 업데이트할 수 있다.

사용자 정의 스타일시트 작성하기

스타일시트는 매우 간단하게 작성할 수 있다. 테마에 사용된 한 쌍의 색상만 있으면 기존 색상 코드를 새 색상 스키마와 일치하는 색상 코드로 대체하는 방법을 사용하여 기존 스타일시트를 기반으로 새 스타일시트를 작성할 수 있다. 스타일시트에서 업데이트할 기본 색상은 다음과 같다.

본문 배경
텍스트, 단추 텍스트, 제목(선택된 경우 및 선택되지 않은 경우)
단추 배경색
사이드 탐색(배경 및 경계 포함)

이전 요소의 색상은 테마의 전체 색상 스키마를 완성하기 위해 여러 스타일 클래스에서 사용된다. 이러한 각 요소의 새 색상 코드를 식별한 후 스타일시트에서 발생할 때마다 기존 색상 코드를 새 색상 코드로 대체할 수 있다.

다음 단계에서는 스타일시트를 작성하고 추가하여 색상표를 사용자 정의하는 방법에 대해 설명한다.

다음 위치에 있는 QuickrCommonResourcesApp.ear 파일을 연다.

custom_common_resources_root \css
이 파일에는 greyTheme, purpleTheme 등의 폴더 목록이 있으며 각 폴더는 사용자 정의 색상표에 나열된 스타일과 연관되어 있다. 각 폴더에는 색상 스키마를 정의하는 스타일시트와 색상 스키마에 일치하는 이미지 세트가 있다.
기존 스타일 폴더(예: greyTheme)를 복사하여 사용자 정의 스타일시트를 정의한다. 이 폴더의 이름을 <yourCustomTheme>로 변경한다. 그리고 스타일시트의 이름도 <yourCustomTheme>.css로 바꾼다.
회사의 테마 색상을 포함하도록 사용자 정의 CSS 파일을 업데이트한다. 변경 사항을 저장한다.
다음으로 사용자 정의 스타일시트를 사용자 정의 색상표에서 사용할 수 있도록 설정해야 한다.
custom_theme_root\system\styles.json 파일을 열고 편집한다.
JSON 파일에는 사용자 정의 색상표에 나열된 각 스타일시트에 대한 항목이 있다. 사용자 정의 스타일시트에 대한 항목을 추가하려면 기존 항목을 복사한 다음 사용자 정의 시트의 경로를 가리키도록 ID를 편집한다. 다음은 새 항목을 보여 주는 예제이다.
{'label':'<newLabel>','id':'<yourCustomTheme>/<yourCustomTheme> .css','thumbnail':ibmPortalConfig.themeRootURI+'/images/changeStyle/ <yourCustomTheme>.gif','help':''}

참고: 이 파일에 오류가 있으면 서버에 있는 사용자 정의 색상표를 로드할 수 없다. 이러한 문제가 발생한 경우에는 파일에 쉼표 누락, 쌍이 맞지 않는 괄호 또는 기타 구문 오류가 있는지 검사한다.

위 단계를 완료하면 쉘프에서 사용할 수 있는 사용자 정의 스타일시트를 볼 수 있다. 그림 4에서는 사용자 정의 시트를 보여 준다.

그림 4. 사용자 정의 테마 단추가 있는 사용자 정의 쉘프

플레이스 카탈로그의 스타일 업데이트하기

로그인 후 시작 페이지(플레이스 카탈로그)에는 사용 가능한 모든 플레이스 목록이 표시된다. 이 페이지의 스타일은 공통 자원 애플리케이션에 저장된 JSP를 사용하여 설정되었다. 다음 단계는 사용자 정의 스타일시트를 플레이스 카탈로그 페이지에 적용하는 방법을 보여 준다.

custom_common_resources_root\defaultTheme\commonstyles.jsp 파일을 custom_common_resources_root \<yourCustomTheme> 폴더에 복사한다.
custom_common_resources_root \<yourCustomTheme>\commonStyles.jsp 파일을 열고 defaultTheme.css 파일을 <yourCustomTheme>.css 파일로 바꾼다.
마지막으로 나열된 JSP를 편집하여 다음과 같이 텍스트 행을 변경한다.

변경할 JSP:
1. wp_profile/installedApps/qkr/placeCntrApp.ear/placeCntrAppUI.war/WEB-INF/jsp/catalog.jsp
2. wp_profile/installedApps/qkr/placeCntrApp.ear/placeCntrAppUI.war/WEB-INF/jsp/search.jsp
3. wp_profile/installedApps/qkr/placeCntrApp.ear/placeCntrAppUI.war/WEB-INF/jsp/templates.jsp
4. wp_profile/installedApps/qkr/placeCntrApp.ear/placeCntrAppUI.war/WEB-INF/jsp/noPermission.jsp
5. wp_profile/installedApps/qkr/searchApp.ear/searchCenterUI.war/WEB-INF/jsp/PlaceSearchCenter.jsp
6. wp_profile/installedApps/qkr/searchApp.ear/searchCenterUI.war/WEB-INF/jsp/ECMSearchCenter.jsp
원본 텍스트 행
<link rel="stylesheet" href="${commonRes}/css/defaultTheme/ commonstyles${rtlSuffix}.jsp" type="text/css" />
대상 텍스트 행
<link rel="stylesheet" href="${commonRes}/css/ <yourCustomTheme>/commonstyles${rtlSuffix}.jsp" type="text/css" />

변경 사항을 저장한 후 브라우저를 새로 고치면 플레이스 카탈로그 페이지에 적용된 사용자 정의 스타일시트를 볼 수 있다.

위로

기본 스타일시트 업데이트하기

로고

회사 로고를 업데이트하려면 다음 파일을 새 로고로 바꾼다.

custom_theme_root\css\images\logo_black.png
custom_theme_root \css\images\logo_white.png
custom_theme_root \css\images\logo.png

로고 스타일 클래스는 themeroot\css\themeStyles.jsp 파일로 압축되어 있다. 이 JSP를 업데이트하여 로고의 높이, 너비, 배경색 등을 조정한다.

글로벌 탐색 및 플레이스 탭

페이지 맨 위에 있는 탐색 링크는 Lotus Quickr의 모든 페이지에서 그대로 유지된다. 이러한 링크를 글로벌 탐색 링크라고 한다. 그림 5에서는 바로 사용할 수 있는 변환된 글로벌 탐색을 보여 준다.

그림 5. 바로 사용할 수 있는 글로벌 탐색

기존 글로벌 탐색은 Dojo 위젯을 사용하여 변환된다. Dojo에 변경 사항을 적용하지 않고도 탐색 표시줄을 수정할 수 있다. 다음 예제에서는 탐색에 항목을 추가하는 방법을 보여 준다(그림 6 및 Listing 2 참조).

그림 6. 사용자 정의된 글로벌 탐색

Listing 2. 글로벌 탐색: globalNav.jspf

<ul id="quickrGlobalNav" class="lotusInlinelist lotusLinks">
<li class="lotusSelected"><a href="/places">Places</a></li>
<li class="lotusInlinelist"><a href="http://yourPortalURL">Portal</a></li>

</ul>

이와 마찬가지로 custom_theme_root\topNav.jspf 파일을 편집하여 플레이스 탭 행을 변경할 수 있다. Listing 3의 코드 스니펫은 플레이스 탭 행에 다른 탭을 추가한다(그림 7 참조).

Listing 3. 상위 탐색: topNav.jspf


<ul class="lotusTabs lotusLeft" style="width: 50%" id="quickrTopNav">
<li class="lotusFirst">
<a href="/places/publicplaces">Public Places</a></li>
    <li class="lotusFirst">
    <a href="/places/myplaces">My Places</a></li>
    <li class="lotusFirst">
    <a href="http://yourcustomURL">Custom Service</a></li>
</ul>

그림 7. 사용자 정의된 플레이스 탭

또는 기존 위젯 코드를 사용하여 LotusQuickr-config 파일에 추가된 사용자 정의 서비스에 대한 링크를 가져올 수도 있다. 사용자 정의 서비스를 Lotus Quickr 구성 서비스에 추가하는 방법에 대한 자세한 정보는 Lotus Quickr 8.5 Information Center의 단계를 참조한다.

사이드 탐색

왼쪽 탐색이라고도 하는 사이드 탐색은 Lotus Quickr 플레이스 내에서 페이지를 변환한다. 기본적으로 사이드 탐색은 Dojo 위젯을 사용하여 작성된다. 사용자는 사이드 탐색을 수정하여 색상 스키마 또는 요소 레이아웃을 편집하거나 항목을 추가할 수 있다. 업데이트된 색상 또는 기타 프리젠테이션 의미와 같은 변경 사항은 공통 자원 애플리케이션에 있는 CSS를 업데이트하여 수정할 수 있는 반면 기존 Members 링크와 유사한 링크를 추가하는 등의 다른 변경 작업을 수행하려면 <themeroot>에 있는 sideNav.jspf 파일을 수정해야 한다.

Listing 4는 사이드 탐색에 추가 항목을 추가하는 방법을 보여 주는 예제이다.

Listing 4. 사이드 탐색: sideNav.jspf

<ul>
     <li <c:if test="${!inPlace}">class="lotusSelected"</c:if>>
        <a id="membersLink" href="${appMembers}
        &mp=${mp}&mr=${mr}&eap=${eap}'
        cp=${colorPalette}<%= ref %>" <c:if 
        test="${!inPlace}">style="cursor:pointer"</c:if>>
        <portal-fmt:text key="view.membership" 
        bundle="nls.quickr" /></a>
     </li>
     <li><a href="">Item 1</a></li>
     <li><a href="">Item 2</a></li>
     <li><a href="">Item 3</a></li>
     \</ul>

그림 8에서는 색상, 메뉴 스타일 및 레이아웃이 업데이트된 샘플 사이드 탐색 메뉴를 보여 준다. 사이드 탐색에 적용된 스타일은 공통 자원 애플리케이션에 저장된다.

그림 8. 사이드 탐색

사용자 정의 쉘프

사용자 정의 쉘프에서는 플레이스 관리자가 사용 가능한 다양한 페이지 레이아웃, 색상 테마 및 Lotus Quickr 컴포넌트를 선택하여 해당 플레이스를 사용자 정의할 수 있다. 관리자가 아닌 플레이스 사용자는 사용자 정의 쉘프를 사용할 수 없다.

바로 사용할 수 있는 상태에 있는 사용자 정의 쉘프에는 Add Content, Change Layout 및 Change Styles라는 세 개의 탭이 있다. Add Content는 플레이스에 컴포넌트를 추가하는 데 사용되며, Change Layout 및 Change Styles는 플레이스의 프리젠테이션을 사용자 정의하는 데 사용할 수 있는 레이아웃과 스타일시트를 제공한다.

앞의 "스타일시트 추가하기" 섹션에서 스타일시트를 작성하고 사용자 정의 테마에 추가하는 방법을 살펴보았다. 이와 마찬가지로 custom_theme_root\new_quickr.json 파일을 수정하여 사용자 정의 컴포넌트를 쉘프에 추가할 수 있다. 컴포넌트를 추가한 후에는 Lotus Quickr의 모든 플레이스 관리자가 해당 사용자 정의 컴포넌트를 사용할 수 있다.

다음 단계에서는 컴포넌트를 사용자 정의 쉘프에 추가하는 데 필요한 변경 사항을 설명한다.

custom_theme_root \new_quickr.json 파일을 열고 편집한다.

JSON 파일에는 사용자 정의 색상표에 나열된 각 컴포넌트에 대한 항목이 있다. 사용자 정의 컴포넌트에 대한 항목을 추가하려면 기존 항목을 복사한 다음 사용자 정의 컴포넌트와 관련된 component_title, description, portletID(포틀릿의 uid), id(포틀릿의 uid) 및 thumbnail 항목의 값 레이블을 편집한다. Listing 5는 새 항목의 예제이다.

Listing 5. 예제 항목: new_quickr.json


{'label':'CustomComponent’,
'component_title':' CustomComponent ', 
'description':'This is my custom component', 
'applicationID':ibmPortalConfig.appID,
'portletID':'wps.p.teamCalendar',
'id':'wps.p.teamCalendar', 
'redirect':'true', 
'nodesOnLevel':ibmPortalConfig.nodesOnLevel, 
'samePage':'true', 
'cmdUrl':ibmPortalConfig.myurl, 
'thumbnail': 'class:qkrSprite-components qkrSprite-components-events-16x16'}

이러한 단계를 완료하면 쉘프에서 사용할 수 있는 사용자 정의 컴포넌트를 볼 수 있다.

팁: 새 항목을 JSON 파일의 마지막 항목으로 추가한 경우에는 파일 형식을 올바르게 유지하기 위해 이전 행의 끝에 쉼표를 삽입한다. 이 파일에 오류가 있으면 서버에 있는 사용자 정의 색상표를 로드할 수 없다.

사용자 정의 컴포넌트를 사용자 정의 쉘프에 추가하는 방법에 대한 자세한 정보는 Lotus Quickr wiki 기사, "Adding components to customize shelf: qp85"를 참조한다.

푸터

테마 페이지의 맨 아래에 있는 섹션인 테마 푸터는 Lotus Quickr 플레이스, 플레이스 카탈로그 또는 플레이스 관리 페이지의 모든 페이지에서 공통으로 사용된다. 공통 푸터는 Lotus Quickr 공통 자원 애플리케이션에 포함되어 있다. 푸터 JSP를 사용자 정의하여 항목을 추가 또는 제거하거나, 레이아웃을 변경하거나, 푸터 스타일을 수정할 수 있다. custom_common_resources_root/jsp/footer.jsp 파일에 액세스하여 테마 푸터를 변경할 수 있다.

위로

스킨 사용자 정의

포틀릿 스킨은 포틀릿을 둘러싸고 있는 랩퍼이다. 포틀릿 제목, 포틀릿 메뉴 조치 및 포틀릿 영역을 표시하는 경계는 모두 스킨에 의해 변환된다. 스킨은 테마 EAR 내의 다음 위치에 번들로 포함되어 있다.


wp_profile\installedApps\<server_node_name>\<QuickrCustomTheme.EAR>\wp.theme.quickrtheme.war\skins\html

그림 9에서는 Lotus Quickr에 표시되는 기본 스킨을 보여 준다.

그림 9. 내부에 포틀릿이 있는 포틀릿 스킨

Lotus Quickr에는 바로 사용할 수 있는 다음 두 가지 기본 스킨이 있다.

XQkrSkin(Lotus Quickr 테마에 사용되는 기본 스킨)
QkrThinSkin

사용자는 요구사항에 따라 둘 중 하나의 스킨 유형을 선택할 수 있다. 기본 QkrSkin은 그림 9와 같다. 이에 반해 QkrThinSkin은 스킨 랩퍼를 숨긴 후 마우스 포인터가 포틀릿 영역에 있을 때만 스킨 랩퍼를 표시한다. 마찬가지로 사용자는 사용자 정의 스킨을 작성하고 플레이스에 적용할 수 있다. 그림 10에서는 QkrThinSkin을 사용하는 플레이스를 보여 준다.

그림 10. 포틀릿이 없는 포틀릿 스킨

이번에는 포틀릿 주위에 스킨 랩퍼가 없다. 하지만 사용자가 포틀릿을 가리키면 랩퍼가 표시된다. 이 랩퍼는 항상 스킨을 표시하지 않거나 포틀릿 메뉴만 표시하도록 사용자 정의할 수 있다.

위로

변환 파일

Lotus Quickr 테마의 언어 번들은 다음 위치에 있다.

\portalserver\shared\app\nls\quickr_xx.properties

이러한 파일은 quickr_[language].properties 형태의 이름 지정 패턴을 따른다. 새 자원 번들을 이 디렉토리에 추가하여 새 문자열을 테마에 추가할 수 있다. 자원 번들을 추가하는 방법에 대한 자세한 정보는 WebSphere Portal Information Center V6.1.5에서 볼 수 있다.

위로

결론

이 기사에서는 Lotus Quickr 8.5의 테마를 사용자 정의하는 일반적인 시나리오를 살펴보았다. 이 기사의 정보를 활용하면 테마를 작성할 수 있을 뿐만 아니라 기존 테마를 자신의 테마로도 만들 수 있다. 이 기사를 통해 테마의 다양한 부분을 수정하는 방법을 이해할 수 있기를 바란다.

참고자료