Spring MVC – 23 – Apache Tiles & TilesViewResolver

Merhaba Arkadaslar.
Bu bolumde Apache Tiles ve Spring MVC entegrasyonunu inceleyecegiz. Apache Tiles acik kaynak kodlu (open-source) sablon/template framework’udur.

Composite View Design Pattern

Composite , bilesim tertip gibi anlamlara gelmektedir.

Bir cok web sitesinde ortak olan bir layout/duzen yer almaktadir.
Icerik olarak farkliliklar olsa da bir web sitesinde cogu zaman benzer bir yapi soz konusudur.

Iste Composite View pattern yapisi bu ortak layout/duzen yapisini etkili bir sekilde kullanmak icin gelistirilmis bir desing pattern yapisidir.

Klasik bir web sayfasi header, menu , body , header gibi alanlardan olusur. Ornegin menu de yer alan bir linke tikladigimizda sadece body’inin degismesini footer , header , menu gibi alanlarin ayni kalmasini isteyebiliriz.

Composite View pattern yapisi parcalarin/pieces tum proje/application boyunca tekrar kullanilabilmesini(reuse) saglamaktadir.

composite view pattern

Apache Tiles Maven Dependency

Oncelikle projemize Apache Tiles maven dependency tanimlarini ekleyelim.
tiles-core ve tiles-jsp eklememiz yeterli olacaktir. Zaten Maven gerekli diger dependency jar dosyalarini da indirecektir.

pom.xml

<properties>
	....
	<tiles.version>3.0.7</tiles.version>
</properties>

....
<!-- Apache Tiles dependency -->

<!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-core -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-core</artifactId>
    <version>${tiles.version}</version>
</dependency>


<!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-jsp -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-jsp</artifactId>
    <version>${tiles.version}</version>
</dependency>
....

Controller

Controller sinifimizda @Controller ve @RequestMapping annotation ile handle metotlarimizi tanimliyoruz.
Basit olarak geriye String literal donuyoruz. Bu String degerler asagida tanimlayacagimiz XML konfigurasyondaki view’lere karsilik gelecektir.
TilesController.java

package _25.apache.tiles.controller;

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

@Controller
public class TilesController {

	@RequestMapping(value = "/menu1")
	public String handleMenu1() {
		return "menu1View";
	}

	@RequestMapping(value = "/menu2")
	public String handleMenu2() {
		return "menu2View";
	}

	@RequestMapping(value = "/page1")
	public String handlePage1() {
		return "page1View";
	}

	@RequestMapping(value = "/page2")
	public String handlePage2() {
		return "page2View";
	}

	@RequestMapping(value = "/page3")
	public String handlePage3() {
		return "page3View";
	}

	@RequestMapping(value = "/page4")
	public String handlePage4() {
		return "page4View";
	}

	@RequestMapping(value = "/page5")
	public String handlePage5() {
		return "page5View";
	}

	@RequestMapping(value = "/page6")
	public String handlePage6() {
		return "page6View";
	}

}

25.apache.tiles.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc 
        http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
        ">

	<context:component-scan base-package="_25.apache.tiles.controller" />

	<mvc:annotation-driven />

	<mvc:resources mapping="/resources/**" location="/resources/" />
	
	<bean id="viewResolver" class="org.springframework.web.servlet.view.tiles3.TilesViewResolver"/>

	<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
		<property name="definitions">
			<list>
				<value>/WEB-INF/25.layout.definitions.xml</value>
				<value>/WEB-INF/25.view.definitions.xml</value>
			</list>
		</property>
	</bean>

</beans>

XML konfigurasyon dosyamizi inceleyecek olursak , view resolver olrak TilesViewResolver sinifi tipinde bean olusturuyoruz. TilesViewResolver sinifi UrlBasedViewResolver sinifini kalitmaktadir.

public class TilesViewResolver extends UrlBasedViewResolver {

..
}

Bir diger nokta olarak TilesConfigurer bean tanimini gerceklestiriyoruz.
TilesConfigurer bean taniminda definitions property icin duzenleme yapiyoruz.

25.layout.definitions.xml

template tanimlarini gerceklestirelim. Bunun icin definition tagini kullaniyoruz.
template attribute olarak tilesTemplate.jsp yi kullanacagiz.

definition taginda kullanabilecegimiz attribute’ler title , header , menu , body , footer icin ilgili jsp sayfalarini tanimliyoruz.

menu1Template ve menu2Template arasinda fark olarak menu attribute’u farklilasmaktadir.

<?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="menu1Template" template="/WEB-INF/jsp/25.apache.tiles.view/template/tilesTemplate.jsp">
		<put-attribute name="title" value="" />
		<put-attribute name="header" value="/WEB-INF/jsp/25.apache.tiles.view/template/header.jsp" />
		<put-attribute name="menu" value="/WEB-INF/jsp/25.apache.tiles.view/template/leftMenu1.jsp" />
		<put-attribute name="body" value="" />
		<put-attribute name="footer" value="/WEB-INF/jsp/25.apache.tiles.view/template/footer.jsp" />
	</definition>


	<definition name="menu2Template" template="/WEB-INF/jsp/25.apache.tiles.view/template/tilesTemplate.jsp">
		<put-attribute name="title" value="" />
		<put-attribute name="header" value="/WEB-INF/jsp/25.apache.tiles.view/template/header.jsp" />
		<put-attribute name="menu" value="/WEB-INF/jsp/25.apache.tiles.view/template/leftMenu2.jsp" />
		<put-attribute name="body" value="" />
		<put-attribute name="footer" value="/WEB-INF/jsp/25.apache.tiles.view/template/footer.jsp" />
	</definition>

</tiles-definitions>

25.view.definitions.xml

Bir diger konfigurasyon olarak Controller sinifimizda kullandigimiz view tanimlarini gerceklestirelim.
definition taginda extends attribute u kullaniyoruz. Hazir template olarak menu1Template ya da menu2Template kullaniyoruz. Hazirladigimiz bu template’ler icin body kismini override ediyoruz.

<?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="menu1View" extends="menu1Template">
		<put-attribute name="body" value="/WEB-INF/jsp/25.apache.tiles.view/myMenu1.jsp" />
	</definition>

	<definition name="menu2View" extends="menu2Template">
		<put-attribute name="body" value="/WEB-INF/jsp/25.apache.tiles.view/myMenu2.jsp" />
	</definition>

	<definition name="page1View" extends="menu1Template">
		<put-attribute name="body" value="/WEB-INF/jsp/25.apache.tiles.view/myPage1.jsp" />
	</definition>

	<definition name="page2View" extends="menu1Template">
		<put-attribute name="body" value="/WEB-INF/jsp/25.apache.tiles.view/myPage2.jsp" />
	</definition>

	<definition name="page3View" extends="menu1Template">
		<put-attribute name="body" value="/WEB-INF/jsp/25.apache.tiles.view/myPage3.jsp" />
	</definition>

	<definition name="page4View" extends="menu2Template">
		<put-attribute name="body" value="/WEB-INF/jsp/25.apache.tiles.view/myPage4.jsp" />
	</definition>

	<definition name="page5View" extends="menu2Template">
		<put-attribute name="body" value="/WEB-INF/jsp/25.apache.tiles.view/myPage5.jsp" />
	</definition>

	<definition name="page6View" extends="menu2Template">
		<put-attribute name="body" value="/WEB-INF/jsp/25.apache.tiles.view/myPage6.jsp" />
	</definition>

</tiles-definitions>

Templates

Sablonda yer alacak JSP dosyalarimizin yapisini inceleyecek olursak ;

footer.jsp
Bu dosya icerisinde herhangi bir farklilik yer almamaktadir. Basit olarak bir footer tanimi yapiyoruz.

 <div class="pageFooter">
  <p>Be an oracle man , import java.*;</p>
  <p>www.injavawetrust.com</p>
 </div>

header.jsp

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<div class="pageHeader">
	<h1>myheader</h1>


	<spring:url value="/menu1" var="menu1" htmlEscape="true" />
	<a href="${menu1}">myMenu1</a>

	<spring:url value="/menu2" var="menu2" htmlEscape="true" />
	<a href="${menu2}">myMenu2</a>

</div>

leftMenu1.jsp
page1 , page2 , page3 linklerinin yer alacagi leftMenu1.jsp dosyamiz ;

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<div class="pageLeftMenu">
	<ul style="list-style: none; line-height: 28px;">


		<li><spring:url value="/page1" var="page1" htmlEscape="true" />
			<a href="${page1}">page1</a></li>
	
		<li><spring:url value="/page2" var="page2" htmlEscape="true" />
			<a href="${page2}">page2</a></li>

		<li><spring:url value="/page3" var="page3" htmlEscape="true" />
			<a href="${page3}">page3</a></li>


	</ul>
</div>

leftMenu2.jsp
page4 , page5, page6 linklerinin yer alacagi leftMenu2.jsp dosyamiz ;

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<div class="pageLeftMenu">
<ul style="list-style: none; line-height: 28px;">

<li><spring:url value="/page4" var="page4" htmlEscape="true" />
<a href="${page4}">page4</a></li>

<li><spring:url value="/page5" var="page5" htmlEscape="true" />
<a href="${page5}">page5</a></li>

<li><spring:url value="/page5" var="page6" htmlEscape="true" />
<a href="${page6}">page6</a></li>

</ul>
</div>

tilesTemplate.jsp
Bu jsp dosyamizda <tiles:insertAttribute> tagini kullaniyoruz. Bunun icin ilgili <@taglib>tanimini dosyamiza eklememiz gereklidir.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html>
<head>
	 <meta http-equiv="content-type" content="text/html; charset=utf-8">	 
	 <link rel="stylesheet" href="resources/css/tiles.css" type="text/css"></link>
	 <title>Page Title</title>
	 <meta name="description" content="Write some words to describe your html page">
</head>
<body>
<div class="blended_grid">
		
	  <tiles:insertAttribute name="header" />
	
	  <tiles:insertAttribute name="menu" />

	  <tiles:insertAttribute name="body" />
	  
	  <tiles:insertAttribute name="footer" />
	  
</div>
</body>
</html>

Views

myMenu1.jsp , myMenu2.jsp , myPage1.jsp … myPage6.jsp dosyalari icerigi basit olarak bir mesaj icermektedir. Ornek olarak ;

myMenu1.jsp

<div class="pageContent">
	<h1>menu1</h1>
</div>

myPage1.jsp

<div class="pageContent">
	<h1>myPage1</h1>
</div>

Deployment Descriptor

Deployment descriptor /web.xml dosyamiza 25.apache.tiles.xml dosyasini ekleyelim.
web.xml

...
<param-name>contextConfigLocation</param-name>
<param-value>					
<!-- 		
  /WEB-INF/01.appContext.xml
  /WEB-INF/02.00.appContext.xml
   ...
-->
  /WEB-INF/25.apache.tiles.xml
 				
</param-value> 	
...

Run Application

Ornegimizi calistiralim ;

http://localhost:8080/injavawetrust.springmvc/menu1

menu1

Dikkat edecek olursak menu1 icin soldaki menude page1 , page2 , page3 yer almaktadir.
body olarak myMenu1.jsp kullanilmaktadir.

myMenu1 icin menu1Template kullanilmaktadir.

	<definition name="menu1View" extends="menu1Template">
		<put-attribute name="body" value="/WEB-INF/jsp/25.apache.tiles.view/myMenu1.jsp" />
	</definition>

layout olarak ; header.jsp , leftMenu1.jsp , footer.jsp kullanilacaktir.

	<definition name="menu1Template" template="/WEB-INF/jsp/25.apache.tiles.view/template/tilesTemplate.jsp">
		<put-attribute name="title" value="" />
		<put-attribute name="header" value="/WEB-INF/jsp/25.apache.tiles.view/template/header.jsp" />
		<put-attribute name="menu" value="/WEB-INF/jsp/25.apache.tiles.view/template/leftMenu1.jsp" />
		<put-attribute name="body" value="" />
		<put-attribute name="footer" value="/WEB-INF/jsp/25.apache.tiles.view/template/footer.jsp" />
	</definition>

page1 e tiklarsak header, footer , left menu ayni kalacaktir , body olarak myPage1.jsp kullanilacaktir. Benzer sekilde page2 ve page3 icin de ayni durum gecerli olacaktir.

page1

myMenu2 ye tikladigimizda , kullanilan template degisecektir leftMenu2 olacak dolayisiyla page4 , page5 page6 linklerini iceren leftMenu2.jsp kullanilacaktir.

menu2View , menu2Template i kullanmaktadir. menu2Template icin leftmenu2.jsp dosyasi kullanilmaktadir.

<definition name="menu2View" extends="menu2Template">
	<put-attribute name="body" value="/WEB-INF/jsp/25.apache.tiles.view/myMenu2.jsp" />
</definition>
<definition name="menu2Template" template="/WEB-INF/jsp/25.apache.tiles.view/template/tilesTemplate.jsp">
	<put-attribute name="title" value="" />
	<put-attribute name="header" value="/WEB-INF/jsp/25.apache.tiles.view/template/header.jsp" />
	<put-attribute name="menu" value="/WEB-INF/jsp/25.apache.tiles.view/template/leftMenu2.jsp" />
	<put-attribute name="body" value="" />
	<put-attribute name="footer" value="/WEB-INF/jsp/25.apache.tiles.view/template/footer.jsp" />
</definition>

Github kaynak kodlar / source folder
Injavawetrust-springmvc-tutorial

Yazimi burada sonlandiriyorum.
Herkese Bol Javali Gunler dilerim.
Be an oracle man , import java.*;
Levent Erguder
OCP, Java SE 6 Programmer
OCE, Java EE 6 Web Component Developer

Print Friendly, PDF & Email

Leave a Reply

Your email address will not be published. Required fields are marked *