Skip to main content

Part 1 - Setting up project and tools - Creating a project to separate view

As I mentioned I want to keep my views modular in some jar (and in future in Database to allow customization if I am building a product). For view I will be using Thymeleaf. It is the best template framework available - highly extensible, super fast and easy to prototype and one could get started with minimal knowledge. Also it can come handy if you intend to send rich emails etc from your application in the future.

Keeping the goal of modularization I will create a new maven quickstart project (archetype : maven-archetype-quickstart). If required create a source folder - src/main/resources to store the view files - thymeleaf templates. You can download the template files from the svn. The link is shared at the end of this post.

Now the only thing that is left is the Spring configuration file - spring-web-config.xml. This is saved under src/main/resources/conf folder. The dispatcher servlet scans and loads this class path resource. The spring configuration file is shown in listing below:

<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/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.1.xsd">

    <context:component-scan base-package="com.effectivcrm.controller" />

    <mvc:resources location="/assets/img/" mapping="/assets/img/**" />
    <mvc:resources location="/assets/css/" mapping="/assets/css/**" />
    <mvc:resources location="/assets/js/" mapping="/assets/js/**" />

    <bean
        class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping">

    </bean>

    <bean
        class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
        <property name="cacheSeconds" value="0" /> <!-- NO CACHE -->
    </bean>

    <bean id="contentNegotiatingResolver"
        class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
        <property name="mediaTypes">
            <map>
                <entry key="html" value="text/html" />
                <entry key="pdf" value="application/pdf" />
                <entry key="xsl" value="application/vnd.ms-excel" />
                <entry key="xml" value="application/xml" />
                <entry key="json" value="application/json" />
            </map>
        </property>
    </bean>

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <!-- Themeleaf View Config -->
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

    <bean id="templateResolver"
        class="org.thymeleaf.templateresolver.ClassLoaderTemplateResolver">

        <property name="suffix" value=".html" />
        <property name="templateMode" value="HTML5" />
        <property name="cacheable" value="false" />
    </bean>

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

    <bean class="org.thymeleaf.spring3.view.ThymeleafViewResolver">
        <property name="templateEngine" ref="templateEngine" />
        <property name="characterEncoding" value="UTF-8" />
    </bean>

</beans>

Now the different thymeleaf templates are shown in listings below:

Listing 1 : common.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerFragment">
<link rel="stylesheet" href="../assets/css/bootstrap.css"
    th:href="@{/assets/css/bootstrap.min.css}" />
<link rel="stylesheet" href="../assets/css/bootstrap-responsive.css"
    th:href="@{/assets/css/bootstrap-responsive.min.css}" />   

<link rel="stylesheet" href="../assets/css/thymeleaf-demo.css"
    th:href="@{/assets/css/thymeleaf-demo.css}" />
</head>
<body>
    <div class="container"></div>
    <footer id="center-footer" th:fragment="footer">
        <div id="footerText" class="span12">
            Copyright 2012 <a href="http://doanduyhai.wordpress.com">doanduyhai</a>
            | <a href="https://github.com/doanduyhai/ThymeLeafDemo">Fork
                ThymeLeaf Demo on Github</a> | <a
                href="https://twitter.com/#!/doanduyhai">Follow @doanduyhai on
                Twitter</a>
        </div>
    </footer>
</body>

</html>

Listing 2 - home.html

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

<head th:include="common :: headerFragment">

<title >effectiv:Home</title>

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

</head>
<body>

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

    <div class="container">
        <br /> <br /> <br />
        <div class="span4 offset4">
            <h1>Home</h1>

            <form action="authentication" th:action="@{/authentication}"
                method="post" class="well">
                <fieldset>
                    <label>Login :</label> <input id="j_username" name="j_username"
                        type="text" required="required" autofocus="autofocus"
                        class="input span3" placeholder="Your login..." /> <label>Password
                        :</label> <input id="j_password" name="j_password" type="password"
                        required="required" class="input span3"
                        placeholder="Your password..." />
                </fieldset>
                <button type="submit" class="btn btn-success">Sign In</button>
                <button type="submit" class="btn btn-info">Recover password</button>
            </form>
        </div>
        <div th:include="common :: [//footer]"></div>
    </div>
</body>
</html>

Listing 3 - sigin.html

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

<head th:include="common :: headerFragment">

<title >effectiv:Sign In</title>

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

</head>
<body>

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

    <div class="container">
        <br /> <br /> <br />
        <div class="span4 offset4">
            <h1>Sign In</h1>

            <form action="authentication" th:action="@{/authentication}"
                method="post" class="well">
                <fieldset>
                    <label>Login :</label> <input id="j_username" name="j_username"
                        type="text" required="required" autofocus="autofocus"
                        class="input span3" placeholder="Your login..." /> <label>Password
                        :</label> <input id="j_password" name="j_password" type="password"
                        required="required" class="input span3"
                        placeholder="Your password..." />
                </fieldset>
                <button type="submit" class="btn btn-success">Sign In</button>
                <button type="submit" class="btn btn-info">Recover password</button>
            </form>
        </div>
        <div th:include="common :: [//footer]"></div>
    </div>
</body>
</html>

SVN location - https://spring-modular.googlecode.com/svn/tag/0.0.1
Related articles, courtesy of Zemanta:

Comments

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

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</s
5 comments
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