Day88 - [Spring]타일즈 뷰 템플릿(Tiles View Template)

2021. 6. 22. 01:09Spring

이번에는 타일즈 뷰 템플릿 에 대해서 알아 봅시다.

 

Tiles View Template

타일즈 뷰 템플릿은 웹 페이지의 상단 및 하단 등 공통적으로 들어가는 코드를 한번에 묶어서 사용할 수 있도록 해주는 라이브러리 입니다.

 

즉. <header> <footer> <navigator> 등과 같이 공통적인 부분은 그대로 두고, <body> 만 바꿔서 편리하게 사용할 수 있도록 해주는 라이브러리 입니다. 

 

ex) header 파일명이 바뀌었을 때, 이 header 를 쓰는 모든 페이지에서는 include 를 할 때 header 의 이름을 전부 변경을 해주어야 하지만, 타일즈 뷰 템플릿을 사용하면 1번만 바꿔주면 됩니다.

 

먼저, Maven 에서 Tiles View Template 를 받아와 줍니다. ( Maven Repository )

아래 빨간색 체크박스에 있는 3개. 버전은 똑같이 맞춰주세요

"pom.xml" 에 넣고, Maven Update 를 해주세요 ( 프로젝트 우클릭 -> "Maven" -> "Update Project" )

정상적으로 Update 가 되었다면, "Maven Dependencies" 에 생겼을 겁니다.

이제, 뷰 리졸버에 대한 설정을 해줘야 합니다. 뷰 리졸버의 설정이 되어 있는 곳으로 이동해주세요

저는 "servlet.context.xml" 에 되어 있습니다.

여기서, 기존 뷰 리졸버의 설정이 되어 있는 곳의 실행 순서를 2번 째로 바꿉니다.

뷰 리졸버는, 컨트롤러에서 뷰 리졸버를 거치면서, 어떤 view 를 화면에 보여줄지 도와주는 역할을 합니다.

 

그리고, 타일즈 뷰 템플릿을 첫 번째로 실행하도록 해줍니다.

이렇게 설정이 완료 되었다면, 타일즈 뷰 템플릿을 적용할 곳을 만듭니다.

즉. header, body, footer 등등 ...

 

저는, "WEB-INF" 폴더 아래에 "tiles" 폴더를 만들고, 그 밑에 "templateDefault.jsp" 를 만들고 아래와 같이 작성했습니다.

타일즈 뷰 템플릿은 <tiles:insertAttribute> 를 사용해서 name 에 해당하는 곳이 배치된다고 생각하시면 되겠습니다.

 

<html> 태그 등 곂치는 부분은 템플릿에서 가지고 있기 때문에, 아래의 header, body 는 불필요하게 해당 태그들을 가지고 있을 필요는 없습니다.

 

이제, header 파일과 body 파일을 작성해 줍니다.

header 파일은 계속 상단에 똑같이 고정이 되어 있지만, body 는 페이지마다 내용이 달라지겠죠? body 부분은 views 폴더에 만듭니다. ( "aaa.jsp" )

이렇게, 보여질 화면을 만들었다면, 타일즈 뷰 템플릿에 대한 설정을 하는 .xml 파일을 만듭니다 ( "tiles.xml" )

타일즈 뷰 템플릿에 대한 설정은 <tiles-definitions> 를 감싸고 안에 <definition> 을 사용합니다.

<put-attribute> 에서 header 를 지정하고, body 부분은 아래 선언한 definition 에서 바꿔 줍니다.

 

위 코드는, 경로중에 "test" 폴더의 * (모든 페이지) 를 아래의 body 에 연결하겠다 라는 뜻입니다.

 

즉. 위에서 만든 타일즈 템플릿의 body 부분에 연결한다는 뜻이 되겠습니다.

 

이제, 컨트롤러에서 해당 파일을 사용하도록 해주기만 하면 되는데, 기존에 사용하는 것과 똑같이 사용하면 됩니다.

분명, aaa 페이지를 요청 했는데, 작성되어 있는 것 외에, 헤더 부분도 같이 나오게 됩니다.

 

위와 같이 사용하면 됩니다.

 

아래는 타일즈 뷰 템플릿을 사용하면서 건드린 경로 입니다.

 

 

이 외에 모든 파일을 공통적으로 적용하고 싶다면 아래처럼 사용하면 됩니다.

"WEB-INF/tiles/templateBasic.jsp" 에 header, left, body, footer 부분을 정해놓고 아래의 3가지 경로를 사용합니다.

 

* -> "views" 폴더 아래의 .jsp 파일 (아무거나)

** -> "views" 폴더 아래의 폴더 1개 (아무거나) 아래 .jsp 파일 (아무거나)

*** -> "views" 폴더 아래의 폴더 1개 (아무거나) 아래 폴더 1개 (아무거나) 아래 .jsp파일 (아무거나)