스프링 타일즈(Tiles) 설명 및 적용 방법

Jay_u·2023년 5월 14일
0

Spring

목록 보기
3/3


타일즈란?

벽면에 타일을 붙이는 것과 같이
웹 페이지의 화면 구성을 나누어 각각의 영역을 다른 타일로 붙일 수 있는 라이브러리 입니다.

주로 Header, Content, nav, right, left, footer 로 나뉘어집니다. 공통된 영역을 Tiles 태그로 구분하여 반복되는 코드를 최소화 할 수 있으며 확장성과 유지 보수에 능합니다.

pom.xml


<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-core</artifactId>
    <version>3.0.7</version>
</dependency>
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-jsp</artifactId>
    <version>3.0.7</version>
</dependency>

spring > appServlet > servlet-context 에


	<beans:bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
        <beans:property name="definitions">
            <beans:list>
                 <beans:value>/WEB-INF/tiles/tiles.xml</beans:value>
            </beans:list>
        </beans:property>
    </beans:bean>
	
	<beans:bean id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
        <beans:property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView" />
        <beans:property name="order" value="1"/> // <==  value 는 호출 순서를 의미
    </beans:bean>

/WEB-INF/tiles > 이 위치에
tiles.xml 파일을 생성해주자.

/WEB-INF/views 에 tiles 폴더를 만들어주자
tilse 폴더에는 이제부터 웹 페이지 각 구역에 맞는 타일을 만들어서 넣어둘 폴더이다.

tiles.xml


<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
       "http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
       
<tiles-definitions>
		<definition name="layout-tiles1"  template="/WEB-INF/tiles/layout/layout1.jsp"> 
        	<put-attribute name="header"  value="/WEB-INF/tiles/header.jsp" />
            <put-attribute name="content" value="" />
			<put-attribute name="footer"  value="/WEB-INF/tiles/footer.jsp" />
        </definition>
        
        <definition name="*.tiles1" extends="layout-tiles1">
			<put-attribute name="content" value="/WEB-INF/views/tiles1/{1}.jsp"/>
		</definition>
</tiles-definitions> 

컨트롤러에서는 view name을 보내게 되는데
이때 받은 view name을 활용해서 tiles.xml에서
view name에 맞는 definition 을 찾는다.

예를 들면
레이아웃이란 것을 정의하게 되는데 레이아웃의 템플릿은 jsp로 만들어둔다.

layout-tiles1.jsp


</head>
<body>
	<div id="mycontainer">
		<div id="myheader">
			<tiles:insertAttribute name="header" />
		</div>
		
		<div id="mycontent">
			<tiles:insertAttribute name="content" />
		</div>
		
		<div id="myfooter">
			<tiles:insertAttribute name="footer" />
		</div>
	</div>
</body>
</html>    

이 레이아웃은 header, contents, footer 를 tiles로 가져오게 된다.

tiles.xml


<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
       "http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
       
<tiles-definitions>
		<definition name="layout-tiles1"  template="/WEB-INF/tiles/layout/layout1.jsp"> 
        	<put-attribute name="header"  value="/WEB-INF/tiles/header.jsp" />
            <put-attribute name="content" value="" />
			<put-attribute name="footer"  value="/WEB-INF/tiles/footer.jsp" />
        </definition>
        
        <definition name="*.tiles1" extends="layout-tiles1">
			<put-attribute name="content" value="/WEB-INF/views/tiles1/{1}.jsp"/>
		</definition>
</tiles-definitions> 

이때, tiles.xml 에서
layout-tiles1 에 attribute로 header, content, footer를 제공한다고 작성해준다. 그리고 현재 나는 header와 footer는 고정된 jsp를 활용하기에 value에 그 위치를 명시해준다.

하지만 content 의 경우에는 value 값을 따로 명시하지 않았는데

name = "*.tiles1" 이 부분을 설명하자면
우리가 Controller에서 url을 매핑해줄 때 어쩌고.tiles1(원래는 어쩌고.jsp) 이라고 써주면

extends="latout-tiles1" 을 통해 layout-tiles1.jsp를 찾아서 가게 되고 그 때 설정된 value 값에 따른 jsp를 열게된다.

즉, header와 contents 는 고정된 채 여러개의 content용 tiles을 만들어 계속해서 갈아 끼울 수 있는 것이다.

profile
정확한 정보를 전달할려고 노력합니다.

0개의 댓글