Skip to main content

Part 3 - Integrating Tiles, Thymeleaf and Spring MVC 3

In this post I will demonstrate how to integrate Apache Tiles with Thymeleaf. This is very simple. The first step is to include the tiles and thymeleaf-tiles extension dependencies. I will include them in the pom.xml. Note we wil lbe using Tiles 2.2.2

Listing 1 - parent/pom.xml --- thymeleaf-tiles and tiles dependencies

        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <!-- Tiles -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-core</artifactId>
            <version>${tiles.version}</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-template</artifactId>
            <version>${tiles.version}</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-servlet</artifactId>
            <version>${tiles.version}</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-jsp</artifactId>
            <version>${tiles.version}</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf.extras</groupId>
            <artifactId>thymeleaf-extras-tiles2</artifactId>
            <version>1.0.0-beta2</version>
        </dependency>

        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>

 

Next step is to include the ThymeleafTilesView and TilesDialect in the spring configuration as shown in Listing 2.

Listing 2 - view/spring-web-config.xml

<bean id="templateEngine" class="org.thymeleaf.spring3.SpringTemplateEngine">
        <property name="templateResolver" ref="templateResolver" />

        <property name="additionalDialects">
            <set>
                <bean class="com.effectivcrm.view.form.ExtraSpringDialect" />
                <bean class="org.thymeleaf.extras.tiles2.dialect.TilesDialect"/>
            </set>
        </property>
    </bean>

    <bean id="tilesViewResolver" class="org.thymeleaf.spring3.view.ThymeleafViewResolver">
      <property name="viewClass" value="org.thymeleaf.extras.tiles2.spring.web.view.ThymeleafTilesView"/>
      <property name="templateEngine" ref="templateEngine" />
      <property name="characterEncoding" value="UTF-8" />
    </bean>

 

Now we will include the tiles-definition file as shown in Listing 3.

Listing 3 - /view/src/main/resources/META-INF/tiles/tiles-defs.xml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
       "http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
<tiles-definitions>
  <definition name="createlead" template="layout">
    <put-attribute name="title" value="Tiles tutorial homepage" />
    <put-attribute name="header" value="header" />
    <put-attribute name="navigation" value="navigation" />
    <put-attribute name="control" value="createleadform" />
    <put-attribute name="footer" value="Foot" />
  </definition>
</tiles-definitions>

 We are not done yet. We will now create the layout as shown in listing 4.

Listing 4 - layout.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:tiles="http://www.thymeleaf.org">

<head>

<title>effectiv:Home</title>

<link rel="stylesheet" th:href="@{/assets/css/bootstrap.min.css}" />
<link rel="stylesheet"
    th:href="@{/assets/css/bootstrap-responsive.min.css}" />

<link rel="stylesheet" th:href="@{/assets/css/thymeleaf-demo.css}" />

<style type="text/css">
body {
    padding-top: 60px;
    padding-bottom: 40px;
}

.sidebar-nav {
    padding: 9px 0;
}
</style>

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../assets/ico/favicon.ico" />

<link rel="apple-touch-icon-precomposed" sizes="144x144"
    href="../assets/ico/apple-touch-icon-144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114"
    href="../assets/ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72"
    href="../assets/ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed"
    href="../assets/ico/apple-touch-icon-57-precomposed.png" />

</head>

<body>

    <div tiles:include="header">
           Header
    </div>

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span3">
                <div tiles:include="navigation">Navigation</div>

                <!--/.well -->
            </div>
            <!--/span-->

            <div class="span9">
                <div tiles:include="control">Control</div>

            </div>
            <!--/span-->

        </div>
        <!--/row-->

        <hr></hr>

        <footer>
            <p>&copy; Company 2012</p>
        </footer>

    </div>
    <!--/.fluid-container-->

</body>
</html>

Note the tiles:include attribute and the xml namespace declaration. This is where the filler pages will be included by Tiles framework.

Listing 5 - header.html

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">

        <div class="container-fluid">
            <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="#">Project name</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="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>

                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</div>

Listing 6 - navigation.html

<div class="well sidebar-nav">
    <ul class="nav nav-list">
        <li class="nav-header">Sidebar</li>
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>

        <li class="nav-header">Sidebar</li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>

        <li><a href="#">Link</a></li>
        <li class="nav-header">Sidebar</li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>

</div>

Listing 7 - createleadform.html

<div class="well"
    xmlns:th="http://www.thymeleaf.org">

    <form class="form-horizontal" action="#" th:action="@{/savelead}"
        name="saveleadform" id="saveleadform" th:object="${lead}"
        method="post">

        <h4>New Lead</h4>

        <div class="alert alert-success" th:if="${lead.id !=null}">
            <strong>Well done!</strong> You successfully read this important
            alert message.
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save</button>
            <button type="button" class="btn">Cancel</button>
        </div>

        <div class="row-fluid">

            <div class="span4">
                <div class="control-group"
                    th:class="${#fields.hasErrors('firstName')}? 'control-group error'">
                    <label class="control-label" for="firstName">First Name</label>
                    <div class="controls">
                        <input type="text" th:field="*{firstName}"
                            placeholder="First Name"></input> <span class="help-inline error"
                            th:if="${#fields.hasErrors('firstName')}"
                            th:errors="*{firstName}">First Name is required.</span>
                    </div>
                </div>
            </div>

            <div class="span4">
                <div class="control-group">
                    <label class="control-label" for="lastName">Last Name</label>
                    <div class="controls">
                        <input type="text" placeholder="Last Name" th:field="*{lastName}"></input>
                        <span class="help-inline" th:if="${#fields.hasErrors('lastName')}"
                            th:errors="*{lastName}">Last Name is required.</span>

                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span4">
                <div class="control-group">
                    <label class="control-label" for="opportunityAmount">Opportunity
                        Amount</label>
                    <div class="controls">
                        <input type="text" placeholder="Opportunity Amount"
                            th:field="*{opportunityAmount}"></input> <span
                            class="help-inline"
                            th:if="${#fields.hasErrors('opportunityAmount')}"
                            th:errors="*{opportunityAmount}">Must be a valid amount.</span>
                    </div>
                </div>
            </div>

            <div class="span4">
                <div class="control-group">
                    <label class="control-label" for="converted">Converted</label>
                    <div class="controls">
                        <input type="checkbox" disabled="true" th:field="*{converted}"></input>
                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span4">
                <div class="control-group">
                    <label class="control-label" for="email">Email</label>
                    <div class="controls">
                        <div class="input-prepend">
                            <input type="text" placeholder="Email" th:field="*{email}"></input>
                            <span class="add-on"><i class="icon-envelope"></i></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="span4">
                <div class="control-group">
                    <label class="control-label" for="mobile">Mobile</label>
                    <div class="controls">
                        <input type="text" placeholder="Mobile" th:field="*{mobile}"></input>
                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span4">
                <div class="control-group">
                    <label class="control-label" for="workPhone">Work Phone</label>
                    <div class="controls">
                        <input type="text" placeholder="Work Phone"
                            th:field="*{workPhone}"></input>
                    </div>
                </div>
            </div>

            <div class="span4">
                <div class="control-group">
                    <label class="control-label" for="fax">Fax</label>
                    <div class="controls">
                        <input type="text" placeholder="Fax" th:field="*{fax}"></input>
                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span8">
                <div class="control-group">
                    <label class="control-label" for="description">Description</label>
                    <div class="controls">

                        <textarea rows="4" cols="20" placeholder="Description"
                            th:field="*{description}"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <hr></hr>
        <h5>Address</h5>

        <div class="row-fluid">
            <div class="span4">
                <div class="control-group">
                    <label class="control-label" for="city">City</label>
                    <div class="controls">

                        <input type="text" id="city" placeholder="City"
                            th:field="*{address.city}"></input>
                    </div>
                </div>
            </div>

            <div class="span4">
                <div class="control-group">
                    <label class="control-label" for="country">Country</label>
                    <div class="controls">
                        <input type="text" id="country" placeholder="country"
                            th:field="*{address.country}"></input>
                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span4">
                <div class="control-group">
                    <label class="control-label" for="postcode">Post Code</label>
                    <div class="controls">

                        <input type="text" id="postcode" placeholder="Post Code"
                            th:field="*{address.postcode}"></input>
                    </div>
                </div>
            </div>

            <div class="span4">
                <div class="control-group">
                    <label class="control-label" for="state">State</label>
                    <div class="controls">
                        <input type="text" id="state" placeholder="State"
                            th:field="*{address.state}"></input>
                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span8">
                <div class="control-group">

                    <label class="control-label" for="street">Street</label>
                    <div class="controls">

                        <textarea rows="4" cols="60" placeholder="Street"
                            th:field="*{address.street}"></textarea>
                    </div>
                </div>

            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save</button>
            <button type="button" class="btn">Cancel</button>
        </div>
    </form>
</div>

Note that we have worked around the original createlead.html file and splitted it into some fragments and this is rendered now via the tiles framework implementing the composite view pattern.Now you can type the same URL - http://localhost:8080/ecrm/createlead and get the create lead view. You can read the Apache Tiles documentation to know more about tiles and its benefits.

In the next episode I will integrate Spring Security 3 with Thymeleaf and Spring MVC. As always the code is available on SVN and you can also find a new list lead controller and view. As an exercise you can try and convert that into tiles view.

Labels:

Comments

  1. AnonymousOctober 23, 2012 at 5:52 AM

    I get the following exception in my servlet config
    Invocation of init method failed; nested exception is org.thymeleaf.exceptions.ConfigurationException: Cannot access field "checkRefresh" in class org.thymeleaf.extras.tiles2.spring.web.configurer.ThymeleafTilesConfigurer. Maybe the implementation of its superclass has changed and the current integration facilities are is no longer compatible.

    ReplyDelete
  2. Java sysoutMarch 7, 2013 at 3:33 AM

    Thanks for showing thymeleaf integration. by the way, we can also use a view resolver for our URL's. I have written a blog post for downloading sample code for spring tiles integration which can be helpful for some developers.

    ReplyDelete
  3. UnknownApril 26, 2015 at 9:51 PM

    Well, I must say thanks a lot. I spent an entire day reading documentations on both Thymeleaf site and Spring but got confused. This really helps clarify.

    ReplyDelete
  4. Vipul ChauhanJanuary 16, 2017 at 9:13 AM

    Excellent.

    ReplyDelete
    Replies
    1. PlootApril 16, 2017 at 6:37 PM

      Thanks Vipul. I am back to writing and all these examples (well most of them will be converted to use Spring BOOT).

      Delete

Post a Comment

Popular posts from this blog

Breaking down the CRM monolith

In my previous posts, I have shared some theory regarding microservices. But it's time to start some implementation. I love to write code and see and feel things working. So I will start a series to refactor a monolithic CRM system and transform it into microservices based flexible software. Big ball of mud. Customer Relationship Management(CRM) is that giant software which existed since time immemorial and is used by all companies in some form or shape. Big enterprises will buy CRM software (also known as packages) from top CRM vendors like Oracle, SAP, Salesforce etc and then employ an army of consultants to try and implement it. Most of the classic CRM systems in the market today, even if deployed on the cloud are the big monolithic ball of mud. They are the gigantic piece of software with the huge feature set. Most often those requirements are surplus to the requirement or they will not fit into the processes of the company. So the company has to hire these certified consu
1 comment
Read more

CKEDITOR 3.x - Simplest Ajax Submit Plugin

  I have assumed that you have downloaded and got started with CKEDITOR. Step 1 – The html file is shown below: <html> <head> <title>Writer</title> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <script type="text/javascript" src="ckeditor/ckeditor.js"></script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <style> .cke_contents { height: 400px !important; } </style> </head> <body> <form action="sample_posteddata.php" method="post"> <textarea id="editor" > </textarea> <script type="text/javascript"> //<![CDATA[ CKEDITOR.replace( 'editor', { fullPage : true, uiColor : '#9AB8F3', toolbar : 'MyToolbar' }); //]]> </script> </form> </body> </html> Note that the jquery js
3 comments
Read more