5.     The composite view pattern

모듈 단위의 뷰를 조합하여 하나의 전체 뷰를 구성하는 메커니즘을 제공하지 않고,각각의 뷰안에 직접 코드를 작성하여 페이지를 생성하는 것은,각 뷰의 레이아웃을 수정할 때,코드 중복 문제를 초래할 수 있으므로 에러가 발생하기 쉽다.

“Composite view pattern”은 부모 뷰와 자식 뷰들을 전체와 부분 관계로 나타낸다.그러므로 모든 뷰는 자신보다 작은 부분들이 모여 이루어진다.이것은 여러 뷰에서 생기는 중복 코드를 감소시키고,각각의 뷰들 사이의 일관성을 높여 유지보수와 제어를 좀더 수월하게 할수 있도록 한다.

 

구조

사용자 삽입 이미지

Composite View pattern class diagram

 

역할

n       Basic View :뷰에 대한 기본적인 추상 개념

n       Composite View :많은 자식 뷰로 이루어진 뷰

n       View :자식뷰가 없는 단일 뷰


사용자 삽입 이미지

Composite View sequence diagram

 

 

역할

n       Composite View :

Composite View는 여러 서브 뷰들이 결합된 뷰이다.

 

n       View Manager :

View Manager는 탬플릿들을Composite View에 포함시키는 것을 관리한다. View Manager는 표준JSP inlcude태그의 형태(<jsp:include>),표준JSP런타임 엔진의 일부가 되거나,더 강력한 기능을 제공하기 위해JavaBean HelperCustom Tag안에 캡슐화될것이다.또한, View ManagerXSLT(eXtensible Stylesheet Transformer )로 구현될 것이다.표준include태그가 아닌 다른 메커니즘을 사용하는 것의 장점은,조건에 따라 포함시키는 것이 쉽다는 것이다.예를 들어,어떤 템플릿 조각은 사용자가 특정한 역할을 수행하거나,시스템 조건이 만족되었을 때만 포함될 수 있다.또한, View Manager로써Helper컴포넌트를 사용하는 것은,페이지 구조 전반에 에 대한 복잡한 제어를 가능하도록 하여,페이지 레이아웃의 재사용면에서 유용하다.

 

n       Included View :

Included View는 전체 뷰 가운데 작은 한 조각인 서브 뷰이다. Included View도 자체적으로 서브뷰와Included View를 포함함으로써, composite가 될 수 있다.

 

 

의도

여러 뷰에서 생기는 중복 코드를 감소시키고,각각의 뷰들 사이의 일관성을 높여 뷰의 유지보수와 제어를 좀더 수월하게 할 수 있도록 한다.

 

적용

n       포탈 사이트등 뷰의 컨텐츠가 자주 변경될 때.

n       고객 목록 테이블과 같은 것은,여러composite뷰에서 사용되는 것이 바람직하다.이러한 테이블에는 다양한 템플릿 텍스트가 붙여질수 있고,페이지상의 다른 위치에서 보여질수도 있다.

n       서브 뷰들을 메인 뷰안에 직접 코딩하도록 함으로써,다른 뷰들과 중복이 발생하는 경우에는,뷰의 레이아웃을 변경하기가 어렵다.

n       템플릿에서 자주 바뀌는 부분을 뷰안에 직접 포함하는 것 역시,이들 템플릿 컴포넌트를 수정할 때마다 서버를 재시작해야하기 때문에 시스템의 가용성과 관리면에서 바람직하지 않다.

 

결론

n       뷰 관리를 세련되게 만드는 다양한 단계: View Manager는 단순히, tag를 포함하는 표준JSP를 활용만 한다.혹은 좀 더 복잡해셔서JavaBean이나Custom Tag로 구현될 것이다.또한View ManagerXSL Transformer가 되어,여러 파일(xsl importinclude)에 기반하는 스타일쉬트를 구성할수도 있다.

n       역할과 정책에 기반하는 판단:세련된View Manager구현은 사용자 역할이나 시스템 조건과 같은 것을 실시간으로 판단하여,뷰 템플릿을 조건적으로 포함할 수 있다.

n       재상용성 향상:이 패턴은 모듈식 설계를 촉진한다.주가조회 테이블과 같은 템플릿을 수맣은 뷰들에 재사용할수 있고,다양한 정보를 재사용되는 부분에 붙일 수 있다.이 패턴은 이 테이블을 그 자체 모듈 안으로 옮기는 것을 허용하며,필요한 곳에 간단하게 포함되도록 한다.이는 중복을 감소시키고,재사용을 촉진하며,운영성을 향상시킨다.

n       운영성 강화:템플릿이 뷰 마크업에 직접 하드코드되어있지 않을 때,템플릿을 유지보수하는 것이 더 효과적이다.뷰로부터 분리되어 있으면,메인 템플릿으로부터 독립적인 템플릿 모듈을 수정하는 것이 가능하며,구현 전략에 따라서는,변경내용을 자동으로 적용할수도 있다.또한,모듈단위로 분해할 수 있으므로,페이지 레이아웃을 변경하는 것이 더 용이하다.

n       운영성의 문제:하나의 뷰를 만들기 위해 여러 디스플레이 부분을 결합하는 것은 디스플레이 에러를 초래하기도 한다.이는 운영적 측면에서 문제가 될수 있다.예를 들어,어떤JSP페이지가3개의 서브 뷰를 포함하는 메인 뷰를 사용히여HTML페이지를 만들려고 할 때,서브뷰들이 각각 여는 태그와 닫는 태그를 가지고 있으면(, <html></html>),결합된 페이지에 문제가 생긴다.따라서,이 패턴을 사용할 때는 포함하는 부분이 다른 조합 뷰가 아니도록 하는 것이 중요하다.태그의 사용이 매우 엄격한 것은 유효환composite view를 만들기 위함이며,이것이 운영상의 문제가 될 수 있다.

n       성능적인 영향:많은 서브 뷰들을 포함하는 것은 속도를 저하시킨다.서브뷰를 실시간으로 포함하는 것은 페이지가 디스플레이되는 시간을 지연시킨다.특정한 응답시간을 지정하는 엄격한 서비스 환경에서는 그러한 성능 저하가 문제가 될 수 있다.그런 경우는 서브뷰를 포함하는 시점을 번역시점으로 옮기는 것이 대안이 될 것이며,이 때는 메인 페이지가 재번역될 때만 서브뷰의 변경사항이 적용될 것이다.

 

예제소스

소스

top.jsp

<%@ page contentType="text/html;charset=EUC-KR"%>

<table cellspacing="2" cellpadding="3" border="1" width="100%">

 <tr>

   <td height="52">

     <P>

       <FONT size="5"><STRONG>Composite View Pattern

           <%= new java.util.Date()%>

         </STRONG>

       </FONT>

     </P>

     <hr/>

   </td>

 </tr>

</table>

 

left.jsp

<table cellspacing="0" cellpadding="0" border="1" width="100%" align="center">

 <tr>

   <td height="192">

     <DIV align="center">&nbsp;</DIV>

     <DIV align="center">

       <STRONG>Left Sub Menu</STRONG>

     </DIV>

   </td>

 </tr>

</table>

 

footer.jsp

<%@ page contentType="text/html;charset=EUC-KR"%>

<hr/>

<DIV align="center">

 <STRONG>Hurukku (craftlee@nate.com)</STRONG>

</DIV>

 

compositerView.jsp

<%@ page contentType="text/html;charset=EUC-KR"%>

<html>

 <head>

   <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"/>

   <title>compositeView</title>

 </head>

 <body>

   <jsp:include page="views/top.jsp" flush="true"/>

   <table cellspacing="0" cellpadding="0" border="0" width="100%">

     <tr>

       <td width="25%">

         <%@ include file="views/leftMenu.jsp"%>

       </td>

       <td width="75%">

         <table cellspacing="0" cellpadding="0" border="1" width="100%" height="191">

           <tr>

             <td height="192">Main Context</td>

           </tr>

         </table>

       </td>

     </tr>

   </table>

   <jsp:include page="views/footer.jsp" flush="true"/>

 </body>

</html>


사용자 삽입 이미지

'Programming > Design Pattern' 카테고리의 다른 글

[펌] The Front Controller Pattern  (0) 2006.01.21
[펌] The View Helper Pattern  (0) 2006.01.21
[펌] The Observer Pattern  (0) 2006.01.21
[펌] The Observer Pattern  (0) 2006.01.21
[펌] The State Pattern  (0) 2006.01.21

Posted by 영웅기삼
,