타일즈 적용방법 및 구조 설정

sungho an·2024년 4월 5일
post-thumbnail
1. pom.xml 파일에 타일즈 라이브러리 추가
		<dependency>
		    <groupId>org.apache.tiles</groupId>
		    <artifactId>tiles-core</artifactId>
		    <version>3.0.8</version>
		</dependency>
		<dependency>
		    <groupId>org.apache.tiles</groupId>
		    <artifactId>tiles-servlet</artifactId>
		    <version>3.0.8</version>
		</dependency>
		<dependency>
		    <groupId>org.apache.tiles</groupId>
		    <artifactId>tiles-jsp</artifactId>
		    <version>3.0.8</version>
		</dependency>
2. dispatcher servlet에 타일즈 리졸버 추가
	<!--  Tiles Resolver : start -->
	<bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver" p:order="1">
	    <property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView" />
	</bean>
	<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
		<property name="definitions">
			<list>
				<value>/WEB-INF/config/tiles/tiles-def.xml</value>
			</list>
		</property>
	</bean>
	<!--  Tiles Resolver : end -->
3. 경로에 맞춰서 타일즈 세팅 파일 정의

예시로 samplelayout// 뒤의 / 이 각각 {1},{2}자리로 들어가서 경로를 설정하게 된다

4. 타일즈를 적용할 베이스 레이아웃 설정

<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%> 추가

타일즈 배치 구조를 세팅한다, 참고로 해당 예시에서는 header, leftMenu, footer 는 미리 만들어놨다

5. 컨트롤러에서 타일즈 세팅

2번에서 tiles-def에 세팅해줬던 definition 타일즈 name이 samplelayout// 이므로 해당 네임 패턴에 맞게 컨트롤러의 리턴값을 맞춰춰야 한다

	<!-- 기본 -->
	<definition name="samplelayout/*/*"
		template="/WEB-INF/jsp/tiles/samplelayout/baseLayout.jsp">
		<put-attribute name="header"
			value="/WEB-INF/jsp/tiles/samplelayout/header.jsp" />
		<put-attribute name="leftMenu"
			value="/WEB-INF/jsp/tiles/samplelayout/leftMenu.jsp" />
		<put-attribute name="body"
			value="/WEB-INF/jsp/vkbio/sample/{1}/{2}.jsp" />
                <put-attribute name="footer"
                         value="/WEB-INF/jsp/tiles/samplelayout/footer.jsp" />
	</definition>

name="samplelayout/*/*"
body부분은 컨트롤러에서 리턴 받는 값에 따라 동적으로 들어간다.
해당 예시에서는 samplelayout/samplemenu/tilesSampleList 이므로 /WEB-INF/jsp/vkbio/sample/samplemenu/tilesSampleList.jsp 파일이 body부분으로 들어가게 된다.


구조

1. 공통적으로 많이 쓰이는 레이아웃은 /jsp/tiles/ 폴더 아래에 위치시켜 분류 시켰다

아래는 vkbio 설비부분의 레이아웃을 만든 모습
업로드중..

2. 설비의 대분류로 하위메뉴들은 각각 소분류로 분리되어 jsp/vkbio/facilites 아래에 하위 폴더로 구분하였다.
3. 설비(facilities)의 타일즈를 컨트롤러에서 동적으로 연결시키기 위해 설비분류 아래의 하위메뉴를 선택할수 있는 첫번째 파라미터와 해당 페이지를 띄울 2번째 파라미터를 동적으로 연결할 수 있게 하였음

설비 센터의 메인화면을 보여주고싶다라고 하면 컨트롤러에서 facilitieslayout/center/CenterMain 을 리턴해주면된다.


타일즈 적용 샘플 예시화면

profile
이것저것 정리

0개의 댓글