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>

Related articles, courtesy of Zemanta:

Comments

Popular posts from this blog

Why do you need Spring Cloud Config server?

Last month I wrote a primer on concepts around 12 factor app. Before getting into the details of the Spring Cloud Config Server, I must refresh on the principle #3 from the list presented in that post.

3 – ConfigurationStore config in the environments
Configuration information must be separate from the source code. This may seem so obvious, but often we are guilty of leaving critical configuration parameters in the scattered in the code. Instead, applications should have environment specific configuration files. The sensitive information like database password or API key should be stored in these environment configuration files in encrypted format.
 The key takeaways from this postulate for a cloud-native microservices application are:
Do not store configuration as part of the deployable unit (in the case of lead microservice - inside the jar or war if you are still deploying war like the good old days). Instead, store it in an external location and make it easily accessible during run-…

Upgrading Lead Microservice - Use MariaDB and Flyway with Spring Boot

So far I have been using an in-memory H2 database or Mockito for testing the lead microservice. To make the transition towards using the Spring Cloud Config server, I need to upgrade the micro-application to use MariaDB. I will be adding the configuration in the application.yml  the file which in the subsequent post will move over to the config server store. I will also be using Flyway to make it easy to maintain the database schema changes in future. I will use this post to introduce Flyway in the mix. Spring Boot also provides first class integration with Flyway. I am using Flyway as its really quick and easy to get started, minimal learning curve (no DSL) and I am comfortable with it having used it in the past.

Assumptions

MariaDB 10 is installedBasic familiarity with FlywayHeidi SQL client is installed.
Step 1 - Update build.gradle to include the MariaDB JDBC and Flyway dependencies.
Do not forget to do a Gradle refresh on your IDE (I am using STS 3.8.4 on Java 8)

Step 2 - Rename the…

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.2Listing 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>