금융에 대한 모든 것

타일즈란?

 타일즈는 타일들을 붙이는 것과 같이 각각의 영역을 붙여서 하나의 웹페이지의 화면을 구성하는 라이브러리입니다. 웹 페이지의 영역은 크기 header, content, left, nav, footer로 나누어지며, 여러 웹 페이지에서 이 영역들을 공통적으로 사용하고 싶다면 각각의 영역을 타일즈 태그로 지정하여 편리하게 사용할 수 있습니다.

 

pom.xml

dependency

<!-- Tiles -->
<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>

위 코드를 pom.xml에 붙여 넣기 합니다.

 

servlet-context.xml

뷰 리졸버 설정

<!-- Resolves views selected for rendering by @Controllers to .jsp resources
    in the /WEB-INF/views directory -->
<beans:bean
    class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <beans:property name="prefix" value="/WEB-INF/views/" />
    <beans:property name="suffix" value=".jsp" />
    <beans:property name="order" value="2" />
</beans:bean>

<!-- Tiles 뷰 리졸버 -->
<beans:bean id="tielsViewResolver"
    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" />
</beans:bean>
<!-- Tiles 설정 파일 -->
<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>

 기존에 있던 빈 설정에서 order속성을 2로 정의하고 tiles 관련 설정을 붙여 넣기 합니다. 여기서 order는 실행이 될 우선순위를 뜻하고 value 태그에 타일즈 설정을 할 xml 파일의 경로를 입력합니다.

 

 

 

 

tiles.xml

 위 경로에서 입력했던 것처럼 /WEB-INF/tiles 폴더를 만들고 그 안에 tiles.xml 파일을 만듭니다.

예시

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC 
    "-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN" 
    "http://tiles.apache.org/dtds/tiles-config_2_0.dtd">
<tiles-definitions>
    <definition name="default-layout" template="/WEB-INF/tiles/layouts/default-layout.jsp">
        <put-attribute name="head" value="/WEB-INF/tiles/components/head.jsp" />
        <put-attribute name="footer" value="/WEB-INF/tiles/components/footer.jsp" />
    </definition>
    
    <definition name="*/*" extends="default-layout">
        <put-attribute name="content" value="/WEB-INF/views/{1}/{2}.jsp" />
    </definition>
</tiles-definitions>

definitions 태그로 타일즈 태그를 사용할 default-layout.jsp 파일의 경로를 입력합니다. 그리고 그 안에 put-attribute  태그로 사용할 태그의 이름, jsp파일의 경로를 입력합니다. content 부분은 컨트롤러에 의해 화면에 띄워질 jsp파일을 의미하므로 name 속성에는 '*/*', value 속성에는 경로를 위와 같이 치환자를 이용하여 적어줍니다.

 

jsp 파일

header.jsp

<!DOCTYPE html>
<html>
    <head>
        <!-- head내용 -->
        <meta charset="UTF-8">
        <title>이름</title>
        <link rel="stylesheet" href="<c:url value='/resources/css/reset.css'></c:url>">
        <link rel="stylesheet" href="<c:url value='/resources/css/style.css'></c:url>">
    </head>
    <body>

    </body>
</html>

footer.jsp

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    <!-- footer 내용 -->
    <footer id="footer">
    ....
    </footer>
    </body>
</html>

 main.jsp

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <!-- content 내용 -->
        <div id="content">
        ...
        </div>
    </body>
</html>

 이 부분들은 tiles:insertAttribute 태그가 될 부분이기 때문에 head 부분만 내용을 작성합니다. footer.jsp, main.jsp 파일도 작성합니다. contents 내용을 담고 있는 main.jsp는 폴더를 하나 만들어서 그 폴더 안에 만들도록 합니다.

 

기본 레이아웃 파일

default-layout.jsp

<%@ page pageEncoding="utf-8" session="false"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>

<html>
    <head>
        <tiles:insertAttribute name="head" />
    </head>
    <body>
        <div class="container">
            <tiles:insertAttribute name="content" />
            <tiles:insertAttribute name="footer" />
        </div>
    </body>
</html>

 기본 레이아웃 페이지는 타일즈 태그를 사용하는 곳으로 타일즈 태그와 연결된 jsp 내용들이 하나의 웹 페이지로 연결되어 나타납니다.

 

컨트롤러 파일

HomeController.java

@Controller
public class HomeController {
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String home() {
        
        return "main/main";
    }
}

  타일즈 설정에서 '*/*' 형식을 만족했기 때문에 해당 main.jsp 파일이 <put-insertAttribute name=content/> 부분으로 연결되어 나타나게 됩니다.

 

 

 

반응형