Seharian ini saya belum megang coding, hehehe yup karena hari ini di penuhi dengan troubleshooting dll… maklumlah selain jadi programmer saya juga merangkap menjadi technical support di kantor yang sekarang .. hehehe setidaknya sampai awal tahun baru pengganti teman saya technical support yang abis lebaran kemarin baru aja pindah tempat kerja. Okey .. segitu aja curhatnya .. lanjut ke tulisan saya yang singkat kali ini saya akan coba menulis tentang teknik templating view pada Spring 3 dengan menggunakan Apache Tiles .. sebelum memulai nya .. simak gambar ini :
Pada tampilan gambar diatas .. sebenarnya terbagi atas 3 bagian .. yaitu Header, Body dan Footer. Sehingga bisa digambarkan seperti ini :
Nah biasanya kalau tidak mengguakan templating, kita akan menulis file JSP kurang lebih seperti ini :
<html> <head> <title>bla.. bla.. bla..</title> </head> <body> Bla.. bla.. bla... </body> </html>
Dengan menggunakan Spring 3 dan Apache Tiles hal seperti diatas dapat di permudah .. firstly download dulu libray nya .. kalo ane via maven .. hahah … berikut ini depedency nya
<dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-api</artifactId> <version>2.1.4</version> <scope>compile</scope> <type>jar</type> </dependency> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-core</artifactId> <version>2.1.4</version> <scope>compile</scope> <type>jar</type> </dependency> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-jsp</artifactId> <version>2.1.4</version> <scope>compile</scope> <type>jar</type> </dependency> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-servlet</artifactId> <version>2.1.4</version> <scope>compile</scope> <type>jar</type> </dependency>
kemudian pada spring-servlet.xml tambahkan seperti di bawah ini :
<?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:p="http://www.springframework.org/schema/p" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd"> <!-- Declare a view resolver --> <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer"> <property name="definitions"> <list> <value>/WEB-INF/layout/tiles-config.xml</value> </list> </property> </bean> <bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver"> <property name="viewClass" value="org.springframework.web.servlet.view.tiles2.TilesView" /> <property name="order" value="1" /> </bean> </beans>
end then buat file tiles-config.xml yang berada di WEB-INF/layout/tiles-config.xml, isinya adalah sebagai berikut :
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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="*.detail" template="/WEB-INF/layout/view.jsp">
<put-attribute name="body" value="/WEB-INF/jsp/{1}/{1}_detail.jsp"/> <!-- untuk view detail -->
</definition>
<definition name="*.form" template="/WEB-INF/layout/view.jsp">
<put-attribute name="body" value="/WEB-INF/jsp/{1}/{1}_form.jsp"/> <!-- untuk view form -->
</definition>
<definition name="*.list" template="/WEB-INF/layout/view.jsp">
<put-attribute name="body" value="/WEB-INF/jsp/{1}/{1}_list.jsp"/><!-- untuk view list -->
</definition>
</tiles-definitions>
kemudian buat file view.jsp yang berada di WEB-INF/layout/view.jsp yang isinya seperti berikut :
<%@ include file="../jsp/taglibs.jsp"%>
<html>
<head>
<title>MG Programming Research</title>
<%@ include file="../jsp/jscsslibs.jsp"%>
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px;
/* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<%@ include file="../jsp/header.jsp"%>
</div>
<div class="container">
<tiles:insertAttribute name="body"/>
</div>
<jsp:include page="../jsp/footer.jsp" />
</body>
</html>
berikut ini file header.jsp dan footer.jsp nya
header.jsp
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse"> <span class="icon-bar"></span> <span
class="icon-bar"></span> <span class="icon-bar"></span>
</a> <a class="brand" href="#">MG Research</a>
<div class="nav-collapse collapse">
<p class="navbar-text pull-right">
Logged in as <a href="#" class="navbar-link">Username</a>
</p>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown"> Admin <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<%-- <li><a href="${ctx }organization">Organization</a></li> --%>
<%-- <li><a href="${ctx }bankaccount">Bank Account</a></li>
<li><a href="${ctx }currency">Currency</a></li> --%>
<li><a href="${ctx }itemCategory">Item Category</a></li>
<li><a href="${ctx }item">Item</a></li>
<li><a href="${ctx }vendorCategory">Vendor Category</a></li>
<li><a href="${ctx }vendors">Vendors</a></li>
<li><a href="${ctx }customerCategory">Customer Category</a></li>
<li><a href="${ctx }customers">Customers</a></li>
</ul></li>
</ul>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown">Sales<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="${ctx }salesOrder">Sales Order</a></li>
</ul>
</li>
</ul>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown">Purchasing<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="${ctx }purchaseOrder">Purchase Order</a></li>
</ul>
</li>
</ul>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown">Inventory<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="${ctx }stockCard">Stock Card</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
footer.jsp
<footer> <p> <center>© MG Programming Research | mg@hidupbersahaja.com </center> </p> </footer>
Nah kalo sudah begini .. liat contoh pada java nya :
@RequestMapping(method = RequestMethod.GET)
public String performListGet(Model model) {
try {
List<PurchaseOrder> purchaseOrder = purchaseOrderService.getAll();
model.addAttribute("purchaseOrder", purchaseOrder);
} catch (Exception e) {
e.printStackTrace();
}
return "purchaseOrder.list";
}
and the last .. buat view nya yaitu purchaseOrder_list.jsp yang berada pada /WEB-INF/jsp/purchaseOrder/purchaseOrder_list.jsp lebih jelasnya liat gambar dibawah ini :
dan beginilah isi purchaseOrder_list.jsp
<%@ include file="../taglibs.jsp"%>
<c:set var="base" value="${ctx }purchaseOrder" />
<h3>Purchase Order</h3>
<table border="0" width="100%" height="50px">
<tr>
<td colspan="3" align="right">
<input type="button" class="btn btn-small btn-primary" value="Add PurchaseOrder" onclick="add();"/>
</td>
</tr>
</table>
<table class="table table-hover" border="1" width="100%">
<thead>
<tr>
<th align="center">#</th>
<th align="center">Code</th>
<th align="center">Date</th>
<th align="center">Vendors</th>
<th width="20%"></th>
</tr>
</thead>
<tbody>
<c:forEach items="${purchaseOrder}" var="purchaseOrder" varStatus="vs">
<tr>
<td align="center">${vs.count }</td>
<td align="left">${purchaseOrder.code}</td>
<td align="left">${purchaseOrder.orderDate}</td>
<td align="left">${purchaseOrder.vendors.company}</td>
<td><a href="${base}/edit?id=${purchaseOrder.id}">Edit</a> <a
href="${base}/delete?id=${purchaseOrder.id}">Delete</a> <%-- <a
href="${base}/detail?id=${purchaseOrder.id}">Detail</a> --%></td>
</tr>
</c:forEach>
</tbody>
</table>
<c:if test="${empty purchaseOrder}">
There are currently no Purchase Order in the list. <a href="${base}/add">Add</a> Purchase Order.
</c:if>
<script type="text/javascript">
function add(){
var addUrl = '${base}/add';
window.location=addUrl;
}
</script>
Semoga bisa membantu … Good Luck !