Spring Boot | 관리자를 위한 공지사항 페이지 | 페이지 공통분모 집중화 | Tiles 지시서 작성 | Tiles View Resolver 생성 | Tiles 패턴 사용

관리자를 위한 공지사항 페이지 만들기

static에 있는 예제를 활용해서 만들기

jsp 파일 경로

NoticeController 만들기 - 관리자용

컨테이너 안에서 참조 변수 이름이 중복돼서 발생하는 문제 해결

NoticeController.java

package com.newlecture.web.controller.admin;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller("adminNoticeController")
@RequestMapping("/admin/board/notice/") 
public class NoticeController {
	@RequestMapping("list") //list,detail,edit,reg
	public String list(Model model){
		
		model.addAttribute("test", "Hello~ Devtools");
		
		return "admin/board/notice/list";
	}
	
	@RequestMapping("detail") //list,detail,edit,reg
	public String detail(){
		
		return "admin/board/notice/detail";
	}
	
	@RequestMapping("reg") //list,detail,edit,reg
	public String reg(){
		
		return "admin/board/notice/reg";
	}
	
}

서버실행 확인

페이지 공통분모 집중화

유지보수를 위해서 페이지 집중화하기

페이지 나누기

연결하기 위해서 나눠놓고 분리된 페이지를 Tiles 라이브러리를 사용 붙이려고 한다.

Tiles 지시서 작성하기

tiles.apache.org/framework/tutorial/basic/pages.html

Apache Tiles - Framework - Creating Tiles Pages

Creating and using Tiles pages After installing and learning some of Tiles concepts, it is time to create some pages. Here you will find the steps to create reusable Tiles pieces and complete pages. Create a template Let's take the classic layout page stru

tiles.apache.org

복사하기

tiles.xml 만들기

tiles.xml

<?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="customer.notice.list" template="/WEB-INF/view/customer/inc/layout.jsp">
    <put-attribute name="title" value="Tiles tutorial homepage" />
    <put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
    <put-attribute name="visual" value="/WEB-INF/view/customer/inc/visual.jsp" />
    <put-attribute name="aside" value="/WEB-INF/view/customer/inc/aside.jsp" />
    <put-attribute name="main" value="/WEB-INF/view/customer/notice/list.jsp" />
    <put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
  </definition>
</tiles-definitions>

Tiles View Resolver 생성하기

TilesConfig.java

package com.newlecture.web.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.view.tiles3.TilesConfigurer;
import org.springframework.web.servlet.view.tiles3.TilesView;
import org.springframework.web.servlet.view.tiles3.TilesViewResolver;

@Configuration
public class TilesConfig {
     @Bean
     public TilesConfigurer tilesConfigurer(){
      TilesConfigurer tilesConfigurer = new TilesConfigurer();
      tilesConfigurer.setDefinitions(new String[] { "/WEB-INF/tiles.xml"} );
      tilesConfigurer.setCheckRefresh(true);
      return tilesConfigurer;
    }

    @Bean
    public TilesViewResolver tilesViewResolver(){
       TilesViewResolver  viewResolver = new TilesViewResolver();
       viewResolver.setViewClass(TilesView.class);
       viewResolver.setOrder(1);
       return viewResolver;
   }    
}

maven pom.xml에 추가

layout에 JSTL 이용해서 타일즈 설정하기

layout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>공지사항목록 ${test}</title>
    
    <link href="/css/customer/layout.css" type="text/css" rel="stylesheet" />
    <style>
    
        #visual .content-container{	
            height:inherit;
            display:flex; 
            align-items: center;
            
            background: url("../../images/customer/visual.png") no-repeat center;
        }
    </style>
</head>

<body>
    <!-- header 부분 -->
	<tiles:insertAttribute name="header" />
   
	<!-- --------------------------- <visual> --------------------------------------- -->
	<!-- visual 부분 -->
	<tiles:insertAttribute name="visual" />
	
	<!-- --------------------------- <body> --------------------------------------- -->
	<div id="body">
		<div class="content-container clearfix">

			<!-- --------------------------- aside --------------------------------------- -->
			<!-- aside 부분 -->
			<tiles:insertAttribute name="aside" />

			<!-- --------------------------- main --------------------------------------- -->
			<tiles:insertAttribute name="main" />


		
		
			
		</div>
	</div>

    <!-- ------------------- <footer> --------------------------------------- -->
	<tiles:insertAttribute name="footer" />



    </body>
    
    </html>

서버 실행

Tiles 패턴 사용하기

tiles.xml

<?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="customer.*.*" template="/WEB-INF/view/customer/inc/layout.jsp">
    <put-attribute name="title" value="Tiles tutorial homepage" />
    <put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
    <put-attribute name="visual" value="/WEB-INF/view/customer/inc/visual.jsp" />
    <put-attribute name="aside" value="/WEB-INF/view/customer/inc/aside.jsp" />
    <put-attribute name="main" value="/WEB-INF/view/customer/{1}/{2}.jsp" />
    <put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
  </definition>
</tiles-definitions>

Admin 페이지 tiles 적용시키기

관리자 뷰단에 layout.jsp 만들기

루트에 있는 파일의 타일즈 설정은 가상의 home 경로 추가시키기 *만 사용하면 인식을 못한다.

tiles.xml

<?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="home.*" template="/WEB-INF/view/inc/layout.jsp">
    <put-attribute name="title" value="Tiles tutorial homepage" />
    <put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
    <put-attribute name="main" value="/WEB-INF/view/{1}.jsp" />
    <put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
  </definition>
  <definition name="customer.*.*" template="/WEB-INF/view/customer/inc/layout.jsp">
    <put-attribute name="title" value="Tiles tutorial homepage" />
    <put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
    <put-attribute name="visual" value="/WEB-INF/view/customer/inc/visual.jsp" />
    <put-attribute name="aside" value="/WEB-INF/view/customer/inc/aside.jsp" />
    <put-attribute name="main" value="/WEB-INF/view/customer/{1}/{2}.jsp" />
    <put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
  </definition>
  <definition name="admin.*.*.*" template="/WEB-INF/view/admin/inc/layout.jsp">
    <put-attribute name="title" value="Tiles tutorial homepage" />
    <put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
    <put-attribute name="visual" value="/WEB-INF/view/admin/inc/visual.jsp" />
    <put-attribute name="aside" value="/WEB-INF/view/admin/inc/aside.jsp" />
    <put-attribute name="main" value="/WEB-INF/view/admin/{1}/{2}/{3}.jsp" />
    <put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
  </definition>
</tiles-definitions>

관리자 NoticeController.java

package com.newlecture.web.controller.admin;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller("adminNoticeController")
@RequestMapping("/admin/board/notice/") 
public class NoticeController {
	@RequestMapping("list") //list,detail,edit,reg
	public String list(){
		return "admin.board.notice.list";
	}
	
	@RequestMapping("detail") //list,detail,edit,reg
	public String detail(){
		
		return "admin.board.notice.detail";
	}
	
	@RequestMapping("reg") //list,detail,edit,reg
	public String reg(){
		
		return "admin.board.notice.reg";
	}
	
}

tiles.xml에서 home.* 설정을 처리하기위해 home.index를 리턴값으로 사용한다.

index를 실행시키는 HomeController.java

package com.newlecture.web.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@Controller
public class HomeController {
	

	@RequestMapping("/index")
	public String index() {
		
		return "home.index";
	}
	
	@RequestMapping("/help")
	public String help() {
		
		return "home.help";
	}
	
}

Tiles의 추가 기능들

다른 레이아웃 정의를 가져다 쓰기 -> 레이아웃이 레이아웃 포함시키기 (중첩)

레이아웃 상속시키기

tiles.xml

<?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="layout.common" template="/WEB-INF/view/inc/layout.jsp">
    <put-attribute name="title" value="Tiles tutorial homepage" />
    <put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
    <put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
  </definition>
  <definition name="home.*" extends="layout.common">
   <put-attribute name="main" value="/WEB-INF/view/{1}.jsp" />
  </definition>
  <definition name="customer.*.*" template="/WEB-INF/view/customer/inc/layout.jsp" extends="layout.common">
    <put-attribute name="visual" value="/WEB-INF/view/customer/inc/visual.jsp" />
    <put-attribute name="aside" value="/WEB-INF/view/customer/inc/aside.jsp" />
    <put-attribute name="main" value="/WEB-INF/view/customer/{1}/{2}.jsp" />
  </definition>
  <definition name="admin.*.*.*" template="/WEB-INF/view/admin/inc/layout.jsp" extends="layout.common">
    <put-attribute name="visual" value="/WEB-INF/view/admin/inc/visual.jsp" />
    <put-attribute name="aside" value="/WEB-INF/view/admin/inc/aside.jsp" />
    <put-attribute name="main" value="/WEB-INF/view/admin/{1}/{2}/{3}.jsp" />
  </definition>
</tiles-definitions>