Tuesday, March 27, 2012

Spring Web Application part 2: Dynamic Tiles

Kali ini saya akan sedikit membahas tentang sebuah template engine yang disebut Tiles2, dan menggunakannya secara dinamis dalam aplikasi web yang menggunakan framework spring. Ini adalah lanjutan dari post sebelumnya, yaitu Spring Web Application part 1: Dynamic Url Mapping, jadi saya akan melanjutkan project yang sama dengan project yang digunakan pada post tersebut. Pada post ini saya juga tidak menerangkan langkah-langkah secara detail untuk langkah-langkah yang sudah pernah dijelaskan pada post sebelumnya.


Sebelum mulai, kita perlu mempersiapkan bahan-bahan yang diperlukan. Berikut ini daftar library tambahan yang kita butuhkan:
  1. Apache Common Digester 2.1
  2. Apache Common BeanUtils 1.8.3
  3. slf4j
  4. Apache Tiles 2.2.2
  5. Spring WebFlow
  6. Dynamic Tiles 1.2
Berikut ini screenshoot library yang dibutuhkan.

apache-common
slf4j
apache-tiles
spring-webflow
dynamic-tiles
Setelah library yang dibutuhkan telah di-include-kan ke dalam project, kita dapat mulai melakukan konfigurasi.
Konfigurasi pertama adalah melakukan penyesuaian pada file webmvc-context.xml. Pada post sebelumnya, kita dapat melihat konfigurasi seperti berikut
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/jsp/"/>
    <property name="suffix" value=".jsp"/>
</bean>    
    
<bean id="viewResolver" 
    class="org.springframework.web.servlet.view.ResourceBundleViewResolver" 
    p:basename="views" />

Baris tersebut akan kita ubah menjadi seperti di bawah ini:
<bean id="tilesConfigurer"
          class="org.springframework.web.servlet.view.tiles2.TilesConfigurer"
          p:definitions="/WEB-INF/tiles-defs/templates.xml" />
 
    <bean id="tilesViewResolver"
          class="org.springbyexample.web.servlet.view.tiles2.TilesAjaxUrlBasedViewResolver"
          p:viewClass="org.springbyexample.web.servlet.view.tiles2.FlowAjaxDynamicTilesView"
          p:prefix="/WEB-INF/jsp/"
          p:suffix=".jsp" />

Pada konfigurasi di atas, didefinisikan bahwa konfigurasi template akan diletakkan pada file /WEB-INF/tiles-defs/templates.xml. Maka kita perlu membuat file templates.xml pada folder /WEB-INF/tiles-defs/. Berikut contoh file templates.xml yang saya gunakan.

<?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>

    <!-- Default Main Template -->
    <definition name=".mainTemplate" template="/WEB-INF/templates/base-layout.jsp">
        <put-attribute name="title" value="Spring Web Application" type="string" />
        <put-attribute name="header" value="/WEB-INF/templates/header.jsp" />
        <put-attribute name="menu-top" value="/WEB-INF/templates/menu-top.jsp" />
        <put-attribute name="menu-side" value="/WEB-INF/templates/menu-side.jsp" />
        <put-attribute name="footer" value="/WEB-INF/templates/footer.jsp" />
        <put-attribute name="content" value="/WEB-INF/templates/blank.jsp" />
    </definition>

</tiles-definitions>

Secara default, dynamic tiles akan mencari definisi template .mainTemplate. Kemudian secara dinamis, definisi template yang digunakan sesuai dengan url yang disediakan. Misalkan, untuk view yang terdapat pada lokasi /WEB-INF/jsp/home/index.jsp, maka dynamic tiles akan mencari definisi template .home.mainTemplate, jika definisi template ini tidak ditemukan, maka akan menggunakan definisi default. Dengan sifat yang dinamis ini, kita dapat memanfaatkan beberapa template untuk beberapa path view yang berbeda. Untuk sementara, kita akan menggunakan template default saja.

Pada definisi template, kita dapat menemukan definisi /WEB-INF/templates/base-layout.jsp yang digunakan sebagai template dasar, kemudian atribut header dengan value "/WEB-INF/templates/header.jsp" yang akan digunakan sebagai header, dan seterusnya. Secara default, dynamic tiles akan mengganti atribut "content" dengan view yang dihasilkan oleh controller. Mari kita lihat contoh file base-layout.jsp berikut.

<%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title><tiles:insertAttribute name="title" /></title>
        <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/css/default.css" />
        <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/css/layout.css" />
        <script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/jquery-1.7.1.min.js"></script>
    </head>
    <body>
        <div id="container">
            <div id="topbar">
                <tiles:insertAttribute name="header" />
            </div>
            <div id="navbar">
                <tiles:insertAttribute name="menu-top" />
            </div>
            <div id="main" class="clearfix">
                <div id="column_left">
                    <tiles:insertAttribute name="menu-side" />
                </div>
                <div id="column_right">
                    <tiles:insertAttribute name="content" />
                </div>
            </div>
            <div id="footer">
                <tiles:insertAttribute name="footer" />
            </div>
        </div>
    </body>
</html>

Pada scriplet di atas, kita dapat melihat cara penggunaan taglib tiles. Taglib tiles digunakan untuk meng-include-kan atribut tiles yang sudah didefinisikan pada templates.xml sebelumnya. Setelah layout dasar selesai dibuat, kita perlu membuat isi dari header, menu, dan footer. Berikut ini contoh header.jsp, menu-top.jsp, menu-side.jsp, dan footer.jsp

header.jsp
<h1>
    Spring Web Application Demo
</h1>

menu-top.jsp
<ul id="mainMenu">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>

menu-side.jsp
<ul id="sideMenu">
    <li>Sub Menu 1</li>
    <li>Sub Menu 2</li>
    <li>Sub Menu 3</li>
    <li>Sub Menu 4</li>
</ul>

footer.jsp
&copy; 2012 All Rights Reserved

Pada contoh ini, saya menggunakan default.css dan layout.css untuk membentuk layout halaman template. Saya tidak menjelaskan tentang css di sini, karena asumsi saya pembaca sudah jago semua css-nya... :p
Untuk css yang saya gunakan, bisa dilihat langsung pada contoh project pada repository yang bisa diakses di sini.

Ini screenshot contoh halaman yang dihasilkan.


Sekian dulu post kali ini. Jika ada yg ingin memberikan saran atau kritik dipersilahkan... :D

4 comments:

  1. A very well-written post. I read and liked the post and have also bookmarked you. All the best for future endeavors
    IT Company India

    ReplyDelete
    Replies
    1. Thanks..
      Well, I'm glad that you understand my post, even thought I wrote this post in Bahasa... :)

      Delete
  2. thanks for sharing.., nanti saya akan coba...
    nb:sekrang masing searching2 dulu.. :)

    ReplyDelete