자바기반의 웹&앱 응용 SW개발자 양성과정 51일차 -80

Layout 집중화

 

jsp 액션 태그들은 view단에서 객체를 생성한 뒤 속성 값을 가져오도록 하는 예전 방식인데 이러한 방식들은  MVC방식에 어긋나는 방법입니다.

 

잘 사용하지 않지만 html의 코드의 반복을 줄이고  다른 페이지의 실행 결과를 현재의 페이지에 포함시킬 때  jsp의 액션 태그인 include를 사용합니다.

 

문법
<jsp:include page="파일 주소"></jsp:include>  


예를 들면 문서상의 구조(header부분, footer부분)를 직접 복사해 다른 페이지에 붙여 넣고 수정하는 작업을 했습니다. 
만약 header와 footer가 변경된다면 수많은 페이지를 직접 수정해야만 했는데 이러한 페이지를 하나의 페이지에 모아서 공유하여 관리를 편하게 하도록 위함입니다.

하지만 각 각의 html에 <jsp:include>를 전부 넣는 것은 별로라고 생각할 수 있습니다.

따라서 tiles라는 프레임워크를 사용하게 됩니다.

 

tiles는 include라는 액션 태그 또한 집중화를 시키는 역할을 합니다.

 

 

우선 bin.zip 파일을 다운로드합니다.

현재 jsp에서 직접적으로  tiles를 사용하는 것은 2.2.2 버전만 지원되는 것 같다.

나중에 스프링 할 때 3.0으로 교체하도록 한다.

 

압축을 풀었다면 폴더 안에 있는 라이브러리 전체를 이클립스 lib파일에 추가해야 합니다.

나중에 maven을 이용해서 이러한 불편사항을 처리할 수 있습니다.

 

이제 지시서를 만들어야 합니다 

공식문서에 있는 내용입니다.

 

Create a definition

By default, the definition file is /WEB-INF/tiles.xml. If you're using CompleteAutoloadTilesListener, tiles will use any file in the webapp that matches /WEB-INF/tiles*. xml or any file in the classpath that matches /META-INF/tiles*. xml; if several are found, it will merge them together.

But for now, let's stick to the default and create the /WEB-INF/tiles.xml file, with a definition as described in concepts:

 

기본적으로 WEB-INF라는 파일 안에 tiles.xml파일을 생성한다고 쓰여있기에 우리도 기본값을 따라 만들어줍니다.

 

그런 다음 레이아웃 역할을 하는 jsp파일을 담기 위한 폴더와 그 안에 기준이 될 파일들을 나열합니다.

 

 

먼저 tiles에게 레이아웃을 제공해주어야 합니다.

 

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
  <definition name="notice.list" template="/inc/layout.jsp">
    <put-attribute name="header" value="/inc/header.jsp" />
    <put-attribute name="main" value="/notice/list.jsp" />
    <put-attribute name="aside" value="/inc/aside.jsp" />
    <put-attribute name="footer" value="/inc/footer.jsp" />
  </definition>
  <definition name="notice.detail" template="/inc/layout.jsp">
    <put-attribute name="header" value="/inc/header.jsp" />
    <put-attribute name="main" value="/notice/detail.jsp" />
    <put-attribute name="aside" value="/inc/aside.jsp" />
    <put-attribute name="footer" value="/inc/footer.jsp" />
  </definition>
</tiles-definitions>

 

각각의 구조 파일들은  구조의 해당되는 소스코드만 삽입합니다.

ex) header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<header id="header">

<div class="content-container">
<!-- ---------------------------<header>--------------------------------------- -->

<h1 id="logo">
<a href="/index.html"> <img src="/images/logo.png" alt="뉴렉처 온라인" />

</a>
</h1>

<section>
<h1 class="hidden">헤더</h1>

<nav id="main-menu">
<h1>메인메뉴</h1>
<ul>
<li><a href="/guide">학습가이드</a></li>

<li><a href="/course">강좌선택</a></li>
<li><a href="/answeris/index">AnswerIs</a></li>
</ul>
</nav>

<div class="sub-menu">

<section id="search-form">
<h1>강좌검색 폼</h1>
<form action="/course">
<fieldset>
<legend>과정검색필드</legend>
<label>과정검색</label> <input type="text" name="q" value="" /> <input
type="submit" value="검색" />
</fieldset>
</form>
</section>

<nav id="acount-menu">
<h1 class="hidden">회원메뉴</h1>
<ul>
<li><a href="/index.html">HOME</a></li>
<li><a href="/member/login.html">로그인</a></li>
<li><a href="/member/agree.html">회원가입</a></li>
</ul>
</nav>

<nav id="member-menu" class="linear-layout">
<h1 class="hidden">고객메뉴</h1>
<ul class="linear-layout">
<li><a href="/member/home"><img
src="/images/txt-mypage.png" alt="마이페이지" /></a></li>
<li><a href="/notice/list.html"><img
src="/images/txt-customer.png" alt="고객센터" /></a></li>
</ul>
</nav>

</div>
</section>

</div>

</header>

 

 

 

 

tiles는 웹서버가 실행될 때 실행되어야 합니다. 따라서 리스너를 실행시켜 서버가 시작할 때 동시에 시작되도록 해야 합니다. 

사용자가 웹페이지를 요청하면 web.xml파일에 설정된 listener을 실행시켜 tiles를 객체화시킵니다.

 

 

리스너 설정

<listener>
<listener-class>org.apache.tiles.web.startup.simple.SimpleTilesListener</listener-class>
</listener>

그런 다음 appliction저장소에 저장된 tiles.xml을 이용하도록  환경변수 설정을 해줍니다.

 

<context-param>
      <description>Tiles configuration file</description>
      <param-name>org.apache.tiles.impl.BasicTilesContainer.DEFINITIONS_CONFIG</param-name>
      <param-value>/WEB-INF/tiles.xml</param-value>
   </context-param>
   

 

 

이후 tiles은 요청받은 jsp파일을 조립해 레이아웃을 제공하기 위해 서블릿 객체를 생성해 tiles Componet에 메모리 로드를 하게 됩니다.

 

이제 컨트롤러에서 tiles 공식문서를 보고 따라 쳐 줍니다.

TilesContainer container = TilesAccess.getContainer(
request.getSession().getServletContext());
container.render("notice.list", request, response);