User Tools

Site Tools


kona_portal_template

TOGA 포털 템플릿

기능 설명

커스텀 컨텐트(그림, html등) 추가

그림 파일

  • 포탈의 로고나 텍스트KPI에 사용되는 그림파일(.gif, .jpg등)은 ${KONA_HOME}/images 아래 임의의 폴더 구조를 만들어 저장한다. 저장된 그림은 브라우저 상에서 컨텍스트 경로 아래 /custom/images 아래 URI로 접근할 수 있다.

HTML 파일

  • 그림 파일의 경우와 마찬가지의 방식으로 임의의 정적인 HTML 파일을 추가할 수 있다. 예를들어 포탈의 EMBED_URL 형식의 메뉴를 이용하면 이렇게 추가한 HTML 파일을 포탈의 특정 메뉴에 링크하는 것도 가능하다.
  • 예) 공지사항을 ${KONA_HOME}/html/notice.html으로 작성하고 이를 포탈 메뉴에 ${contextPath}/custom/html/notice.html로 등록.

CSS, 자바스크립트 추가

  • 그림이나 HTML 파일과 마찬가지로 임의의 CSS나 자바스크립트 파일도 각각 ${KONA_HOME}/css, ${KONA_HOME}/scripts 경로에 관리할 수 있다. 추가된 CSS와 스크립트의 경우 자동으로 모든 웹 페이지의 head 부분에 링크되어 별도의 설정 없이 사용가능하다.

그리드 이미지 추가

  • TOGA 에서 제공하는 그리드의 이미지와 다른 이미지를 사용하고 싶을때, KONA_HOME의 디렉토리에서 확장이 가능하다.
  • 템플릿별로 확장이 가능한데, 예로 darkblue 템플릿의 경우, ${KONA_HOME}/templates/darkbule/grid/imgs에 같은 이름의 이미지 파일을 기존 이미지 대신 사용하게 된다.

커스텀 템플릿 추가

커스텀 템플릿 활용

  • TOGA 는 포탈별로 사용자가 임의로 선택해서 사용할 수 있는 미리 정의된 디자인 템플릿을 제공한다. 프로젝트에 따라 새로운 디자인이 필요한 경우 정해진 방식에 따라 새로운 사용자 템플릿을 개발하거나 기존 템플릿을 확장하여 일부분만 변경할 수 있다.

커스텀 템플릿 개발

  • 템플릿을 개발하기 위해서는 ${KONA_HOME}/templates 아래 사용하려는 템플릿 ID를 이름으로 폴더를 만들고 기존 템플릿을 참조해서 내용을 구성한다. 작성된 템플릿은 ${KONA_HOME}/context.xml에 등록 후에 서버를 재시작하면 자동으로 인식되어 사용할 수 있다. (보충 설명 필요)
  • 예) darkblue라는 id의 템플릿을 개발할 경우 템플릿 레이아웃의 예 :
경로 설명
${KONA_HOME}/templates/darkblue/ 기본 경로
${KONA_HOME}/templates/darkblue/css CSS 경로
${KONA_HOME}/templates/darkblue/images 그림 파일
${KONA_HOME}/templates/darkblue/grid/imgs 그리드의 그림 파일
  • 예) ${KONA_HOME}/context.xml에 darkblue 템플릿을 등록 (자세한 내용은 디자인 템플릿을 참조)

<sxh xml> <?xml version=“1.0” encoding=“UTF-8”?> <beans xmlns=“http://www.springframework.org/schema/beans

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
     http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd">
<!-- darkblue 템플릿 -->
<bean id="template-darkblue" parent="template-default">
	<property name="id" value="darkblue" />
	<property name="name" value="다크블루" />
	<property name="description" value="예제 템플릿" />
	<property name="styleSheet" value="/style.css" />
	<property name="reportStyleSheet" value="/css/report/gray.css" />
	<property name="controlSkin" value="laguna" />
	<property name="noticeCount" value="5" />
</bean>

</beans> </sxh>

기존 템플릿 확장

  • 경우에 따라서는 기존의 템플릿의 일부만 수정해서 간단하게 새로운 템플릿을 작성할 수 있다. 예를들어 darkblue 템플릿을 처음부터 만들지 않고 기존 skyblue 템플릿에서 일부 그림 파일만 변경한다면, context.xml에 아래와 같이 property에 parentId=“skyblue”를 추가하고 변경된 그림 파일만 본래와 같은 경로에 추가한다.
  • 즉, skyblue 템플릿의 /images/logo.gif의 색상이 변경되었다면,
<!-- darkblue 템플릿 -->
<bean id="template-darkblue" class="com.eyeq.kona.model.portal.PortalTemplate">
    <property name="id" value="darkblue" />
    <property name="name" value="다크블루" />
    <property name="description" value="예제 템플릿" />
    <property name="parentId" value="skyblue" />
</bean>
  • 위와 같이 skyblue를 상속받아 필요한 부분만 변경해서 등록한후, 변경된 logo.gif은${KONA_HOME}/templates/darkblue/images/logo.gif 와 같이 저장하여 사용한다.
  • 만일 기존 템플릿의 CSS를 변경하고 싶다면 전체 CSS 내용을 변경할 경우 그림파일의 경우와 마찬가지로 원본과 동일한 이름으로 작성한다. 반면 일부 내용만을 추가하고 싶다면 다른 이름으로 새로운 템플릿의 /css 경로에 저장하면 원래의 부모템플릿의 CSS와 함께 자동으로 웹페이지에 링크되어 사용할 수 있다.

포털 템플릿에 인쇄 설정

  • .kona 아래에 context.xml 파일을 편집한다.
  • 해당 템플릿 설정의 reportTools 속성을 찾아 인쇄 관련 속성을 추가한다.
  • 브라우저 인쇄와 애플릿 인쇄 둘 중에 하나만 적용할 수 있다.
  • 브라우저 인쇄 기능 사용
<bean class="com.eyeq.kona.model.portal.ReportTool">
	<property name="id" value="print" />
	<property name="tooltip" value="레포트 인쇄" />
	<property name="script">
		<value>
		<![CDATA[
			printReport();
		]]>
		</value>
	</property>
</bean>
  • 애플릿 기반의 인쇄 기능 사용
<bean class="com.eyeq.kona.model.portal.ReportTool">
        <property name="id" value="print-applet" />
        <property name="tooltip" value="레포트 인쇄(Applet)" />
        <property name="script">
            <value>
            <![CDATA[
                printReportApplet();
            ]]>
            </value>
        </property>
</bean>

tag_template_context_인쇄

kona_portal_template.txt · Last modified: 2013/08/12 16:54 by gpqzm