Header 커스터마이징

알프레스코를 기반으로 제품을 만들기 위해서는 커스터마이징이 필요하다.

이번 포스팅에서는 header 영역에 외부 링크를 연결시키는 방법을 연구해보았다.

기본적인 알프레스코 헤더는 아래와 같다. 아래 부분에 Naver 링크를 추가할 것이다.

share-config-custom.xml 수정 (링크 추가)

1. share-config.xml 에서 header 설정을 확인한다.

"<configRootShare>/classes/alfresco/share-config.xml" 파일을 오픈한다. 예를 들어 톰캣이라면 "<TOMCAT_HOME>/webapps/share/WEB-INF/classes/alfresco/share-config.xml" 파일을 연다.

<alfresco-config> <!-- Global config section --> <config replace="true"> <flags> <!-- Developer debugging setting to turn on DEBUG mode for client scripts in the browser --> <client-debug>false</client-debug> <!-- LOGGING can always be toggled at runtime when in DEBUG mode (Ctrl, Ctrl, Shift, Shift). This flag automatically activates logging on page load. --> <client-debug-autologging>false</client-debug-autologging> </flags> <header> <app-items> <!-- defaults: icon="{id}.png" label="header.{id}.label" description="header.{id}.description" --> <item type="link" id="my-dashboard">{userdashboardpage}</item> <item type="js" id="sites">Alfresco.module.Sites</item> <item type="link" id="people">/people-finder</item> <item type="link" id="repository" condition="conditionRepositoryRootNode">/repository</item> <item type="container" id="more"> <container-group id="my"> <item type="link" id="my-tasks">/my-tasks#filter=workflows|active</item> <item type="link" id="my-workflows">/my-workflows#filter=workflows|active</item> <item type="link" id="my-content">/user/user-content</item> <item type="link" id="my-sites">/user/user-sites</item> <item type="link" id="my-profile">{userprofilepage}</item> </container-group> <container-group id="tools" permission="admin"> <item type="link" id="application">/console/admin-console/application</item> <item type="link" id="groups">/console/admin-console/groups</item> <item type="link" id="replication-jobs" condition="!conditionEditionTeam">/console/admin-console/replication-jobs</item> <item type="link" id="repository">/console/admin-console/repository</item> <item type="link" id="trashcan">/console/admin-console/trashcan</item> <item type="link" id="users">/console/admin-console/users</item> <item type="link" id="more">/console/admin-console/</item> </container-group> </item> </app-items> <user-items> <item type="container" id="user" icon="" description=""> <container-group id="usermenu" label=""> <item type="user" id="status">{userprofilepage}</item> <item type="link" id="my-profile">{userprofilepage}</item> <item type="link" id="change-password" condition="user.capabilities.isMutable">/user/change-password</item> <item type="external-link" id="help">{share-help}</item> <item type="link" id="logout" condition="!context.externalAuthentication">/dologout</item> </container-group> </item> </user-items> <dependencies> <css src="/modules/create-site.css" /> <css src="/modules/header/sites.css" /> <js src="/modules/create-site.js" /> <js src="/modules/header/sites.js" /> </dependencies> </header> </config> ... </alfresco-config>

위와 같이 "Global config" 영역에 헤더가 정의되어 있다.

2. share-config-custom.xml.sample 파일을 오픈한다.

"<web-extension>/share-config-custom.xml.sample" 파일을 오픈한다. 예를 들어 톰캣이라면 "<TOMCAT_HOME>/shared/classes/alfresco/web-extension/share-config-custom.xml.sample" 파일을 연다.

<alfresco-config> <!-- Global config section --> <config replace="true"> <flags> <!-- Developer debugging setting to turn on DEBUG mode for client scripts in the browser --> <client-debug>false</client-debug> <!-- LOGGING can always be toggled at runtime when in DEBUG mode (Ctrl, Ctrl, Shift, Shift). This flag automatically activates logging on page load. --> <client-debug-autologging>false</client-debug-autologging> </flags> </config> ... </alfresco-config>

1번의 <header> 부분을 share-config-custom.xml 파일에 복사합니다.

3. naver 링크 추가

alfresco-config > config > header > app-items 에 새로운 item 엘리먼트를 추가한다.

<header> <app-items> <!-- defaults: icon="{id}.png" label="header.{id}.label" description="header.{id}.description" --> <item type="link" id="my-dashboard">{userdashboardpage}</item> <item type="js" id="sites">Alfresco.module.Sites</item> <item type="link" id="people">/people-finder</item> <item type="link" id="repository" condition="conditionRepositoryRootNode">/repository</item> <item type="external-link" id="naver">http://www.naver.com</item> ... </app-items> </header>

위의 8번 줄과 같이 naver 링크를 추가한다. (item 엘리먼트의 자세한 설명은 다른 포스팅을 통해 정리할 예정이다)

4. share-config-custom.xml 파일로 저장한다.

"<web-extension>/share-config-custom.xml" 파일로 저장한다. 예를 들어 톰캣이라면 "<TOMCAT_HOME>/shared/classes/alfresco/web-extension/share-config-custom.xml" 파일로 저장한다.

Label & Description & Icon 설정

위의 설정을 추가한 후, 알프레스코를 재시작 하면 "header.naver.id" 라는 레이블의 링크가 생긴다. 이러한 링크를 원하는 레이블로 변경하려면 다음과 같은 작업이 필요하다.

1. share-config-custom.xml 파일로 저장한다.

"<configRootShare>/classes/alfresco/messages/slingshot.properties" 파일을 오픈한다. 예를 들어 톰캣이라면 "<TOMCAT_HOME>/webapps/share/WEB-INF/classes/alfresco/messages/slingshot.properties" 파일을 연다.

header.naver.label=Naver

header.naver.description=Naver...

위의 label 과 description 을 추가한 후, 알프레스코를 재시작하면 정상적으로 label 과 description 이 표시된다. 하지만 아이콘이 없어 다른 링크와 어울리지 않는다.

2. icon 이미지를 추가한다.

이번 포스팅에서 사용하는 네이버 링크의 이미지는 네이버에서 16 x 16 사이즈의 png 이미지를 다운받았다. 이 파일을 "naver.png" 로 저장한 후 (<item id="{id}" /> 에서 사용한 {id}.png 로 저장한다) "<TOMCAT_HOME>/webapps/share/components/images/header" 디렉토리에 복사한다.

이미지는 재시작하지 않아도 바로 확인할 수 있다.

이상으로 알프레스코 헤더에 외부 링크를 붙이는 방법을 마친다.

 

참고자료

• http://forums.alfresco.com/forum/installation-upgrades-configuration-integration/configuration/customize-head-menu-09032012
• http://docs.alfresco.com/4.2/index.jsp?topic=%2Fcom.alfresco.enterprise.doc%2Ftasks%2Fshare-repodoclib-hide.html